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从他们身上，其中有像淘汰赛框架或主干时进行比较。