Question

这是fiddle。

我有一个视图模型，其中部分数据在用户交互后可用。

由于applyBindings已在文档就绪时调用，为什么在按钮点击事件期间需要再次调用？

HTML：

<p>first name:
    <input type="text" data-bind="value: ray.firstName" />
</p>
<p>last name:
    <input type="text" data-bind="value: ray.lastName" />
</p>
<p>first name:
    <input type="text" data-bind="value: joe.firstName" />
</p>
<p>last name:
    <input type="text" data-bind="value: joe.lastName" />
</p>

JS：

function person(firstNm, lastNm) {
    this.firstName = firstNm;
    this.lastName = lastNm;
}

function myApp() {
    this.ray = new person();
    this.joe = new person();
}

var app = new myApp();
app.ray = new person('ray', 'cheng');
ko.applyBindings(app);

$('#showName').on('click', function () {
    app.joe = new person('joe', 'public');
    ko.applyBindings(app); // <-- why is this needed since applyBindings already called above.
});

Answer 1

您需要拨打applyBindings两次，因为您没有使用observables。如果没有observable，Knockout无法跟踪您的对象是否已更改，因此无法更改UI。

所以你的视图模型应如下所示：

function app() {
    this.ray = ko.observable(new person());
    this.joe = ko.observable(new person());
}

因为ko.observable返回一个函数，你需要像下面这样设置它们：

app.ray(new person('ray', 'cheng'));
app.joe(new person('joe', 'public'));

要获取data-bind表达式中的值，您需要调用ko.observable而不需要ray().firstName之类的任何参数来获取其值：

<input type="text" data-bind="value: ray().firstName" />

演示JSFiddle.

为什么我必须在更改视图模型的属性后再次调用applyBindings？

1 个答案: