Knockout: Daten bekommen

Question

Ich muss für jeden Schüler Daten über "Note" bekommen, aber die Methode, die ich versucht habe scheint nicht zu funktionieren ... Ich würde jede Art von Hilfe oder Ratschläge zu schätzen wissen.

<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> 

Und Knockout ein:

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

ich eine Liste von Studenten haben und auf den „Hinweis“ Taste drücken, möchte ich Anzeige Details über sie in einem Warnfeld.

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 Studentenmodell:

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

JSON Hinweis Modell:

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

Answer 1

Da Sie einen separaten API-Aufruf für die Noten der Schüler haben, du bist Sie müssen Ihr Modell ein wenig mehr abstrahieren, so dass Sie die speziellen Informationen zu den Schülern ausfüllen können wenn der 2. api-Anruf nach dem Laden aller Schüler erfolgt.

Hier ist das Ergebnis JSFiddle. Es gibt ein paar Änderungen am Code hier zu beachten:

• Dummy-Daten ersetzt die Ajax-Aufrufe
• ein Objekt Student Defined mit einer beobachtbaren Notiz Eigenschaft
• Hinzugefügt ap-Tag mit Daten-bind Text für jeden Schüler Note (Sie kann einen Schritt weiter gehen diese und eine Daten-bind sichtbar auf die Note klicken Taste hinzufügen, nachdem der Student Notiz zurückgegeben)

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>