MVVM和更新視圖模型

Question

關於產品MVVM和數據在劍道移動綁定：

• account.js：

  define([], function() { 
      return { 
       userPhone: 111 
      }; 
  }); 
  

• index.html：

  <p>Phone: <span id="test-span" data-bind="html: userPhone"></span>.</p> 
  

• home-view.js：

  define(["kendo", "app/account"], function (kendo, account) { 
  
  var viewModel = kendo.observable({ 
      userPhone: account.userPhone 
  }); 
  
  return { 
      show: function() { 
       viewModel.set("userPhone", account.userPhone); // LINE A 
  
       account.userPhone = "222"; // LINE B 
  
      },  
      viewModel: viewModel 
  } 
  }); 
  

  1. 無線A和線B，#test-span顯示器（空）
  2. 由於只有線A，#test-span顯示 「111」
  3. 由於只有線B，#test-span顯示器（空）

我明白爲什麼＃2的行爲方式如此。我只是不明白爲什麼＃1和＃3的行爲和他們一樣。我認爲MVVM和數據綁定的重點在於，我可以更新account.userPhone並使其全局更新視圖，而無需執行viewModel.set。

假設我有home-view2.js,home-view3.js等，我怎樣才能更新所有viewModels只會改變帳戶屬性？

Answer 1

根據使用的框架，B行將工作或不工作，在這種情況下，KendoUI不是基於髒檢查。這意味着直接設置account.userName將不起作用，更新需要通過調用模型類中的特殊設置器（例如A行）來完成。

例如，AngularJs基於髒檢查，因此B行將工作，如果放在控制器或內部呼叫$apply，並且不需要像行A的代碼。

角度髒檢查的工作方式是通過拍攝一個簡單的JavaScript對象的快照，然後在適當的時刻（在事件回調，ajax回調和setTimeouts）另一個快照。

如果兩個快照不同，則觀察account.userName的所有組件都會更新，例如DOM元素 - 這就是如何實現角色雙向綁定與純javascript對象的作用。

看看基於Kendo小部件的Angular庫的angular KendoUI。

如果你有興趣在髒檢查和它是如何工作，看看這個podcast由角作家，這answer從他們身上，其中有像淘汰賽框架或主幹時進行比較。