ノックアウト：データを取得する

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> 

ノックアウト1：

<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()); 

私は学生のリストを持っていると「注意」ボタンを押すことによって、私は警告ボックスにそれらについての表示内容をたい。

EDIT：

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注モデル：あなたが学生のノートのための別のAPI呼び出しを持っているので、あなたがしている

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

Answer 1

あなたのモデルを少し抽象化しなければならないので、その特定の学生に記入することができますすべての学生を読み込んだ後に2回目のapi呼び出しが行われたときにオンにします。

JSFiddleの結果がここにあります。カップルのコードの変更は、ここで注意することがあります：

• ダミーデータは、各生徒のノートのためのデータ・バインドテキストとアヤックスが観察ノートプロパティで学生のオブジェクトを定義
• を呼び出し
• を追加しました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>

）さらに一歩これを取ると生徒のノートが返された後のためにメモクリックボタンに表示されるデータバインドを追加することができます210