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
}
});

没有LINE A和LINE B ，#test-span显示（null）
只有LINE A ，#test-span会显示“111”
仅限LINE B ，#test-span显示（null）

我理解为什么＃2的行为方式如此。我只是不明白为什么＃1和＃3表现得像他们一样。我认为MVVM和数据绑定的重点在于我可以更新account.userPhone并让它全局更新视图而无需viewModel.set。

假设我有home-view2.js，home-view3.js等，如何更新所有viewModel只更改帐户属性？

Answer 1

B行可以工作与否，具体取决于所使用的框架，在这种情况下，KendoUI不是基于脏检查的。这意味着直接设置account.userName将不起作用，更新需要通过调用模型类中的特殊setter来完成，例如在A行中。

例如，AngularJs基于脏检查，因此如果放在控制器上或在$apply内调用，B行就可以工作，并且不需要像A行那样的代码。

角度脏检查的工作方式是获取普通javascript对象的快照，然后在适当的时刻（在事件回调，ajax回调和setTimeouts上）再拍摄另一个快照。

如果两个快照不同，则会更新观察account.userName的所有组件，例如DOM元素 - 这就是与普通javascript对象进行角度双向绑定的方式。

根据Kendo小部件查看angular KendoUI Angular库。

如果您对脏检查及其工作方式感兴趣，请看Angular作者的这个podcast，以及来自他们的answer，其中与Knockout或Backbone等框架进行比较是制成。

MVVM并更新ViewModel

1 个答案: