Зачем мне снова называть applyBindings после изменения свойства модели просмотра?

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. И без наблюдаемых нокаутов не может отслеживать, что ваши объекты изменены, поэтому он не может изменить пользовательский интерфейс.

Таким образом, ваш вид модели должен выглядеть следующим образом:

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" /> 

Demo JSFiddle.