视图模型未在保存或文本输入时更新

Question

这很可能是一个简单的修复，但我在这里用头撞墙。所以我收到来自服务器的 JSON 响应，我正在使用 ko.mapping 访问我的视图模型。数据绑定到输入文本字段。但是视图模型没有更新。

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

关于为什么我的视图模型没有更新的任何想法？

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

将绑定从 "textInput" 更新为仅值，并从您的“

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

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

视图模型未在保存或文本输入时更新

View Model not updating on save or on textInput

javascript

knockout-mapping-plugin

knockout.js