javascript - Knockout JS - 通过自定义脚本更新ViewModel数据

Question

我想对现有页面实现 knockout 功能。因此我想使用现有脚本中的 ViewModel 数据进行操作。我模拟了一个例子，但它不能正常工作。

ViewModel 已正确绑定(bind)到 UI(尝试在输入中键入)。当我在后端修改 ViewModel 数据时(通过按按钮)，它也会起作用。但是，当我通过在输入框中键入内容再次修改输入值时，数据并没有改变。

如何从后端正确修改 ViewModel 数据(一些现有代码操作数据)。请注意，我使用 jQuery 单击事件作为示例。现有代码可能以不同的方式操作数据。

这里是代码(HTML):

<!-- View -->
<p>First name: <strong data-bind="text: myName"></strong></p>
<input data-bind="value: myName"></input>
<button>Click me</button>

还有 JS:

// ViewModel
var AppViewModel = function() {
    this.myName= ko.observable("John Doe");
}
// ViewModel instance
var app = new AppViewModel();

// Activates knockout.js
ko.applyBindings(app);

// Custom external code that changes the data in the ViewModel instance
$("button").click(function() {
    app.myName= ko.observable("Steve Peterson");
    ko.applyBindings(app);
});

Answer 1

而不是在点击处理程序中创建新的可观察对象

app.myName= ko.observable("Steve Peterson");

修改现有可观察值的值

app.myName("Steve Peterson");

工作示例 http://jsfiddle.net/S9HBq/