Question

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

<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。＆＃39; gradeList＆＃39;也是一个可观察的阵容，但它的工作和我得到了很好的下拉菜单。最后一次＆＃39; p＆＃39;元素，文字随着每个添加＆＃39;而更新。按钮单击[对象对象]文本，但表永远不会更新。

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。＆＃39;标记＆＃39;的值和所有标志＆＃39;在控制台中更新，但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：您[object Object]所见的allMarks是因为您将text绑定应用于对象数组，因此您获得默认{{1}对象的行为。您可能还需要toString foreach。

knockout observableArray不更新表

1 个答案: