敲除：獲取數據

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>