Question

这很可能是一个简单的解决办法，但我在这里抨击我的头。所以我从服务器获得了JSON响应，我正在使用ko.mapping加入我的viewmodel。数据绑定到输入文本字段。但是视图模型不会更新。

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

关于我的viewmodel没有更新的原因的任何想法？

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”更新为value，并从“

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

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

视图模型在保存或textInput上不更新

1 个答案: