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 Note Model：

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

Answer 1

由于您对学生的笔记有单独的API调用，因此您需要更多地抽象您的模型，以便您可以在第2次api时填写特定的学生笔记信息在加载所有学生之后打电话。

这是JSFiddle的结果。这里需要注意几个代码更改：

虚拟数据取代了ajax调用
使用可观察的音符属性
为每个学生笔记添加了带有数据绑定文本的p标记（您可以更进一步，并在返回学生笔记后添加数据绑定对笔记点击按钮可见）

＆＃13;

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

＆＃13;

table {
  width: 100%;
}

table td {
  width: 15%;
}

＆＃13;

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

＆＃13;

淘汰赛：获取数据

1 个答案: