Что особенного в обновлении автоматического просмотра Knockout?

Question

Я изучаю Knockout.js, и у меня есть основополагающий вопрос, который может звучать глупо, но это действительно вызывает у меня довольно долгое время.

По данным официального сайта, один из главных признака Knockout.js является:

отслеживания Elegant зависимость - автоматически обновляет правые части вашего UI всякий раз, когда ваши модели данных изменений.

Я понимаю, как это работает. (Поправьте меня ниже, если я не прав в какой-либо части.)

В принципе, если я следующий вид:

<h1 data-bind="text: name"></h1> 
<p data-bind="text: status"></p> 

и после ViewModel:

function FlightVM() { 
    this.name = ko.observable("Boieng 120"); 
    this.status = ko.observable("In Air"); 
} 

ko.applyBindings(new FlightVM()); 

Если изменить свои данные где-то, он автоматически обновит соответствующий html. Это я хорошо понимаю.

Мой вопрос, чем отличается здесь, чем просто установив свои данные в представлении следующим образом:

var name = "Boieng 120"; 
$("h1").html(name); 

Здесь также, если я сменю имя, и обновите страницу, она будет обновлять HTML динамически. Какое преимущество дает нам нокаут?

Answer 1

Нет. Принятый здесь ответ не дает полного ответа.

Ваше понимание того, что означает «отслеживание зависимостей» на самом деле, неверно. То, что вы описываете, на самом деле является только привязанной к данным частью нокаутов. Эта функциональность очень распространена и во многом используется во многих других средах.

Отслеживание зависимости, где нокаут становится намного, намного умнее.

Скажем, у вас есть два наблюдаемыми:

var firstName = ko.observable("akshay"); 
var lastName = ko.observable("Khot"); 

и теперь вы делаете вычисленного наблюдаемым:

var fullName = ko.computed(function(){return firstName()+" "+lastName();}); 

Теперь давайте создадим модель:

var model = { 
    firstName:firstName, 
    lastName:lastName, 
    fullName:fullName 
} 

и привязать его:

ko.applyBindings(model); 

к следующему HTML:

<span data-bind="text:fullName"></span> 

Теперь, поскольку отслеживание зависимостей подсчитал, что fullName зависит от firstName и lastName, при обновлении любого из этих значений:

model.lastName("is cool"); 

затем уведомления от зависимых от model.fullName приведет к изменению значения model.fullName и для этого значения, которое должно быть обновлено в DOM (так что теперь он читает akshay is cool), хотя DOM не связан до lastName, только что-то, что зависит от lastName.

Довольно аккуратный, когда вы думаете об этом, и функция, которая заставляет меня возвращаться к нокауту как моя рамочка.

Если это оставляет вам интересно, как это все работает ...

http://knockoutjs.com/documentation/computed-dependency-tracking.html

и

http://www.knockmeout.net/2014/05/knockout-dependency-detection.html