淘汰 observableArray 不更新表

Question

我想从表单字段中获取值并将它们作为对象保存到 observableArray 中。并将它们显示在表格中。所以，每次我点击“添加”按钮时，表格都应该更新，但它不起作用。

<select data-bind="options: gradeList, optionsText: 'Name', value: selectedGrade"></select>
<input type="text" data-bind="value: komark" />
<button data-bind="click: addMark">Add</button>
<table>
    <thead>
        <tr>
            <th>SN</th>
            <th>Name</th>
            <th>Mark</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: allMarks">
        <tr>
            <td data-bind="$data.id"></td>
            <td data-bind="$data.name"></td>
            <td data-bind="$data.mark"></td>
        </tr>
    </tbody>
</table>
<p data-bind="text: allMarks"></p>

这是我的html。 'gradeList' 也是一个 observableArray，但它可以工作，我得到了不错的下拉菜单。在最后一个“p”元素上，每次单击“添加”按钮都会更新文本，并使用 [Object object] 文本，但表格永远不会更新。

var newModel = function () {
    var self = this;
    self.komark = ko.observable();
    self.mark = ko.observable();
    self.selectedGrade = ko.observable();
    self.gradeList = ko.observableArray([]);
    self.allMarks = ko.observableArray([]);
    self.loadAllGrades = function () {
        $.ajax({
            type: "GET",
            dataType: "text",
            url: "studenthandler.ashx",
            data: { "action": "getAllGrades", "id": 0 },
            success: function (res) {
                self.gradeList(JSON.parse(res));
            },
            error: function () {
                alert("Failed to load.\nHit Refresh.");
            }
        });
    };

    self.addMark = function () {
        // console.log("button clicked");
        self.mark({ "id": self.selectedGrade().Id, "name": self.selectedGrade().Name, "mark": self.komark() });
        console.log(self.mark());
        self.allMarks.push(self.mark());
        console.log(self.allMarks());
    };
    self.loadAllGrades();
}

这是我的 javasript。 'mark' 和 'allMarks' 的值在控制台中更新，但 TABLE 永远不会更新。

Answer 1

<td data-bind="$data.id"></td> 没有做任何事情，你没有指定绑定。你可能想要：

<td data-bind="text: $data.id"></td>
<!-- ----------^^^^^^            -->

...name、mark 类似。

工作示例：

var newModel = function() {
  var self = this;
  self.komark = ko.observable();
  self.mark = ko.observable();
  self.selectedGrade = ko.observable();
  self.gradeList = ko.observableArray([]);
  self.allMarks = ko.observableArray([]);
  self.loadAllGrades = function() {
    /*
    $.ajax({
        type: "GET",
        dataType: "text",
        url: "studenthandler.ashx",
        data: { "action": "getAllGrades", "id": 0 },
        success: function (res) {
            self.gradeList(JSON.parse(res));
        },
        error: function () {
            alert("Failed to load.\nHit Refresh.");
        }
    });
    */
    self.gradeList.push(
      {Id: 1, Name: "Grade1"},
      {Id: 2, Name: "Grade2"},
      {Id: 3, Name: "Grade3"}
    );
  };

  self.addMark = function() {
    // console.log("button clicked");
    self.mark({
      "id": self.selectedGrade().Id,
      "name": self.selectedGrade().Name,
      "mark": self.komark()
    });
    //console.log(self.mark());
    self.allMarks.push(self.mark());
    //console.log(self.allMarks());
  };
  self.loadAllGrades();
}
ko.applyBindings(new newModel(), document.body);

<select data-bind="options: gradeList, optionsText: 'Name', value: selectedGrade"></select>
<input type="text" data-bind="value: komark" />
<button data-bind="click: addMark">Add</button>
<table>
    <thead>
        <tr>
            <th>SN</th>
            <th>Name</th>
            <th>Mark</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: allMarks">
        <tr>
            <td data-bind="text: $data.id"></td>
            <td data-bind="text: $data.name"></td>
            <td data-bind="text: $data.mark"></td>
        </tr>
    </tbody>
</table>
<p data-bind="text: allMarks"></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

---

旁注：$data.id 是写id 的一段很长的路要走。 :-)

---

旁注 2：您看到的 allMarks 的 [object Object] 是因为您将 text 绑定应用于对象数组，因此您获得了对象的默认 toString 行为。您可能还需要 foreach 来代替 allMarks。