1

这是小提琴。

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

既然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.
});
4

1 回答 1

2

您需要调用applyBindings两次，因为您没有使用observables。如果没有 observables，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。

于 2013-04-23T19:14:04.320 回答