Knockout的自動視圖更新有什麼特別之處？

Question

我正在學習Knockout.js，我有一個基本問題，聽起來可能很愚蠢，但它真的讓我感到困擾很長一段時間。

據官方網站，Knockout.js的主要特徵之一是：

優雅的依賴追蹤 - 自動更新您的UI時，您的數據模型更改的正確的零件。

我明白這是如何工作的。 （糾正我，下面，如果我錯了，在任何地方。）

基本上，如果我有以下觀點：

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

及以下視圖模型：

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動態。 Knockout給了我們什麼優勢？

Answer 1

不，這裏接受的答案略低於完整答案。

您對「依賴性跟蹤」實際意義的理解是錯誤的。你描述的實際上只是knockoutjs的數據綁定部分。這個功能非常常見，並且在許多其他框架中被複制。

依賴性跟蹤是淘汰賽變得更加聰明的地方。

說你有兩個觀測：

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。

當你想到它和一個功能，讓我回到KO作爲我的goto框架，非常整潔。

如果這讓你好奇，這一切是如何工作的？

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

和

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