Javascript KnockoutJS，如何使用HTML5内容更新视图模型？

我有以下代码：

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>

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

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

小提琴：

事情很少

只需调用applyBindings一次，ko就会为您同步数据

您无需创建“保存”按钮，即可自动同步数据

您的标题和物品不可观察，因此ko无法为您自动更新

ko“文本”绑定是一种单向绑定，它仅在值更改时更新视图。您需要在输入标记中使用“值”绑定来获得双向绑定

目前，还没有支持contenteditable的现有ko绑定。您可以为它构建一个自定义bindingHandler，但要注意获取contenteditable更改事件是很棘手的

您的列表应该是一个可观察的列表

以下是“值”绑定的工作示例：

拯救
var viewModel=
{
名单：ko.Array([{
“标题”：ko.可观察（“标题一”），
“项目”：可观察到的ko（“项目一”）
}])
};
应用绑定（视图模型）；
$（“按钮”）。在（“单击”，函数（）{
var data=ko.toJSON（viewModel）；
控制台日志（数据）；
});

---

要知道，您可能会从ajax调用加载JSON数据，将所有值更改为ko.observable是很繁琐的。如果需要，可以试试。

这回答了我提出的问题，似乎很有效。但很明显，我可能需要重新思考我是如何做事的。非常感谢。

<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);
});