敲除：获取数据

Question

我需要为每个学生获取有关“注释”的数据，但我尝试的方法似乎不起作用......我会很感激任何形式的帮助或建议。

<table data-bind="foreach: students"> 
     <tr> 
      <th>ID</th> 
      <th>Nume</th> 
      <th>Prenume</th> 
      <th>Data</th> 
     </tr> 
     <tr> 
      <td><input type="text" size="1" data-bind="value: StudId" disabled="disabled"></td> 
      <td><input type="text" size="60" data-bind="value: Nume" disabled="disabled"></td> 
      <td><input type="text" size="60" data-bind="value: Prenume" disabled="disabled"></td> 
      <td> 
       <input type="text" size="15" data-bind="value: Data" disabled="disabled"> 
       <input data-bind="click: $parent.deleteStudent.bind($parent, $data.StudId)" type="button" value="Sterge" class="button button1" id="sterge" /> 
       <input data-bind="click: function() { $parent.loadNote.bind($parent, $data.StudId)(); alert(// I wanna display the received json in this alert box); }" type="button" class="button button2" value="Note" /> 
      </td> 
     </tr> 
    </table> 

和基因敲除一个：

<script type="text/javascript"> 
     var uri = 'api/student'; 

     var StudentsViewModel = function() { 
      this.students = ko.observableArray(); 
      this.note = ko.observableArray(); 

      this.loadNote(); 
      this.loadStudents(); 
     }; 

     StudentsViewModel.prototype.loadStudents = function() { 
      var self = this; 
      $.getJSON(uri, function (data) { 
       self.students(data); 
      }); 
     }; 

     StudentsViewModel.prototype.loadNote = function (id) { 
      var self = this; 
      $.getJSON(uri + '/' + id, function (data) { 
       self.note(data); 
      }); 
     }; 
// Apply bindings 
     ko.applyBindings(new StudentsViewModel()); 

我有学生名单，并通过按下“注”按钮，我想在一个警告框，关于它们的详细显示。

编辑：

var StudentsViewModel = function() {  
     this.students = ko.observableArray(); 
     this.note = ko.observableArray(); 


     this.loadStudents(); 
     this.loadNote(); 
    }; 

    StudentsViewModel.prototype.loadStudents = function() { 
     var self = this; 
     $.getJSON(uri, function (data) { 
      self.students(data); 
     }); 
    }; 

JSON学生模型：

{ 
    "StudId": 7, 
    "Nume": "Mihalache", 
    "Prenume": "Florin", 
    "Data": "2016-07-05T12:00:00" 
    } 

JSON注型号：

{ 
    "Student": "Mihalache Florin", 
    "NotaId": 1, 
    "Materie": "Matematica", 
    "Nota": 10, 
    "Status": true 
} 

Answer 1

既然你有一个单独的API调用，为学生的笔记，你将不得不多抽一点你的模型，以便填写特定的学生笔记信息在加载所有学生后进行第二次API调用时。

以下是JSFiddle上的结果。有一对夫妇的代码更改这里要注意：

• 虚拟数据所取代Ajax调用
• 定义的学生对象与观察到的音符财产
• 添加为每个学生记事本的数据绑定文本AP标签（你可以更进一步借此，并添加一个数据绑定的说明点击按钮可以查看返回学生音符后）

var Student = function(id, first, last, date) { 
 
    this.StudId = id; 
 
    this.Nume = first; 
 
    this.Prenume = last; 
 
    this.Data = date; 
 

 
    this.Note = ko.observable(""); 
 
} 
 

 
var StudentsViewModel = function() { 
 
    this.students = ko.observableArray(); 
 
    this.note = ko.observable(""); 
 
    this.loadStudents(); 
 
}; 
 

 
StudentsViewModel.prototype.loadStudents = function() { 
 
    var self = this; 
 
    self.students([ 
 
    new Student(7, "Mihalache", "Florin", "2016-07-05T12:00:00"), 
 
    new Student(7, "Ben", "Florin", "2016-07-05T12:00:00"), 
 
    new Student(7, "Jill", "Florin", "2016-07-05T12:00:00")]); 
 
}; 
 

 
StudentsViewModel.prototype.loadNote = function(student, event) { 
 
    var self = this; 
 
    var ajaxNote = ""; \t // switch out for ajax response data 
 
    var studeId= student.StudId; 
 
    
 
    if (studeId === 7) ajaxNote = "note for 7"; 
 
    else if (studeId === 8) ajaxNote = "note for 8"; 
 
    else if (studeId === 9) ajaxNote = "note for 9"; 
 
    
 
    student.Note(ajaxNote); 
 
    console.log(studeId + ": " + ajaxNote); 
 
    self.note(ajaxNote) 
 
}; 
 

 
// Apply bindings 
 
ko.applyBindings(new StudentsViewModel());

table { 
 
    width: 100%; 
 
} 
 

 
table td { 
 
    width: 15%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<table data-bind="foreach: students"> 
 
    <tr> 
 
    <th>ID</th> 
 
    <th>Nume</th> 
 
    <th>Prenume</th> 
 
    <th>Data</th> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="text" size="1" data-bind="value: StudId" disabled="disabled"> 
 
    </td> 
 
    <td> 
 
     <input type="text" size="60" data-bind="value: Nume" disabled="disabled"> 
 
    </td> 
 
    <td> 
 
     <input type="text" size="60" data-bind="value: Prenume" disabled="disabled"> 
 
    </td> 
 
    <td> 
 
     <input type="text" size="15" data-bind="value: Data" disabled="disabled"> 
 
     <input data-bind="click: $parent.loadNote" type="button" class="button button2" value="Note" /> 
 
     <p data-bind="text: $data.Note"></p> 
 
    </td> 
 
    </tr> 
 
</table> 
 

 
<p data-bind="text: note"></p>