javascript - View 模型在保存或文本输入时未更新

Question

这很可能是一个简单的修复，但我在这里用头撞墙。所以我收到了来自服务器的 JSON 响应，我将其发送到我的 View 模型 ko.mapping 。数据绑定(bind)到输入文本字段。但是 View 模型没有更新。

我期望的是，如果输入文本字段已更新， View 模型已更新，并且 <p>在其上方更新(绑定(bind)到同一字段)。

关于为什么我的 View 模型没有更新有什么想法吗？

JSON 响应

{
  "notes": [
    {
      "key": "Field1",
      "value": "Progress"
    },
    {
      "key": "Field2",
      "value": "Plan"
    }
  ]
}

HTML

<tbody>
    <!-- ko foreach: notes -->
    <tr>
        <td class="col-xs-12">
            <p data-bind="text: value()"></p>
            <input type="text" class="form-control" data-bind="textInput: value()" />
        </td>
        <td class="col-xs-12">
            <!-- ko ifnot:editingItem-->
            <a class="btn btn-default btn-sm pull-right" data-bind="click: $parent.editRow">Edit</a>
            <!-- /ko -->
            <!-- ko if:editingItem-->
            <a class="btn btn-default btn-sm pull-right" data-bind="click: $parent.stopEdit">Cancel</a>
            <!-- /ko -->
        </td>
    </tr>
    <!-- /ko -->
</tbody>

JS

 var mapping = {
    'notes': {
        create: function (item) {
            // console.log(item);
            return new Note(item.data.key, item.data.value, false);
        }
    }
 }

 function Note(key, value, editing) {
    this.key = key;
    this.value = ko.observable(value);
    this.editingItem = ko.observable(editing);
 }

 function NotesModel() {
    var self = this;
    self.notes = ko.observableArray([]);
    self.Save = function () {
        console.log(ko.toJSON(self));
    };
    self.editRow = function (item) {
        //Stop editing other rows
        $.each(self.notes, function (i, v) {
            v.editingItem(false);
        });
        item.editingItem(true);
    }
    self.stopEdit = function (item) {
        item.editingItem(false);
    }
 };
 var notesModel = new NotesModel();
 ko.mapping.fromJS(data, mapping, notesModel);
 ko.applyBindings(notesModel, $('#CIR_NotesFields')[0]);

Answer 1

将绑定(bind)从“textInput”更新为仅值，并从“

”绑定(bind)中删除显式可观察引用，就像下面的标记一样。

<tbody>
    <!-- ko foreach: notes -->
    <tr>
        <td class="col-xs-12">
            <p data-bind="text: value"></p>
            <input type="text" class="form-control" data-bind="value: value" />
        </td>
        <td class="col-xs-12">
            <!-- ko ifnot:editingItem-->
            <a class="btn btn-default btn-sm pull-right" data-bind="click: $parent.editRow">Edit</a>
            <!-- /ko -->
            <!-- ko if:editingItem-->
            <a class="btn btn-default btn-sm pull-right" data-bind="click: $parent.stopEdit">Cancel</a>
            <!-- /ko -->
        </td>
    </tr>
    <!-- /ko -->
</tbody>

https://jsfiddle.net/c9t1oagv/