javascript - KnockoutJS，如何使用可编辑的 HTML5 内容更新 View 模型？

Question

我有以下代码:

HTML:

<ul class="list" data-bind="foreach: list">
    <li class="title" data-bind="text:title" contenteditable="true"></li>
    <li class="item" data-bind="text:item" contenteditable="true"></li>
</ul>
<button type="button">Save</button>

JS:

var data = {
  "list": [{
    "title" : "title one",
    "item"  : "item one"
    }]
}

    var viewModel= 
    {
        list : ko.observable(data.list)
    };
    ko.applyBindings(viewModel);


    $("button").on("click", function(){
        var vm = viewModel;

        ko.applyBindings(vm);
        var data = ko.toJSON(vm);

        console.log(data);
    });

但是当我这样做时，我得到了这个错误:

Uncaught Error: You cannot apply bindings multiple times to the same element. 
knockout-3.1.0.js:58

我想做的是更改其中一项的文本，并在我单击“保存”按钮时将其保存到 View 模型。

fiddle :

http://jsfiddle.net/sr4Fg/13/

Answer 1

东西很少。

1. 只调用一次applyBindings，然后ko会为你同步数据。
2. 无需创建保存按钮，自动同步数据。
3. 您的标题和项目不是 ko.observable，因此 ko 无法为您自动更新。
4. ko “文本”绑定(bind)是一种单向绑定(bind)，它仅在您的值更改时更新 View 。您需要在输入标签中使用“值”绑定(bind)以获得双向绑定(bind)。
5. 目前，不存在支持 contenteditable 的现有 ko 绑定(bind)。您可以为其构建一个自定义的 bindingHandler，但要注意获取 contenteditable 更改事件很棘手。
6. 您的列表应该是一个 observableArray。

这是带有“值”绑定(bind)的工作示例:http://jsfiddle.net/sr4Fg/41/

<ul class="list" data-bind="foreach: list">
  <li class="title"><input data-bind="value:title" /></li>
  <li class="item"><input data-bind="value:item" /></li>
</ul>
<button type="button">Save</button>

var viewModel= 
{
  list : ko.observableArray([{
    "title" : ko.observable("title one"),
    "item"  : ko.observable("item one")
  }])
};
ko.applyBindings(viewModel);


$("button").on("click", function(){
  var data = ko.toJSON(viewModel);
  console.log(data);
});

了解您可能会从 ajax 调用加载 JSON 数据，将所有值更改为 ko.observable 是乏味的。尝试 http://knockoutjs.com/documentation/plugins-mapping.html如果你需要的话。