淘汰赛:获取数据

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调用。
• 定义具有可观察便笺属性的学生对象
• 为每个学生笔记添加了一个带有数据绑定文本的p标记(您可以更进一步，并在返回学生笔记后添加一个可见于便笺单击按钮的数据绑定)。

​

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 = "";	// 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>

​