【层级结构】Ext.js5 视图模型的内部

知道了视图模型能做什么，现在我们来看看视图模型里面到底发生了什么。视图模型有两个不同的工作：一个是管理数据对象的改变，另一个是当数据产生变化时安排绑定。
一、视图模型数据和继承
视图模型类管理”数据“对象，并且使用js原型链来支持值的继承。如下图：

意思是所有的组件都可以读取最上层容器设置的数据(仓库在对应的数据对象中，’Data 1’)。即是我们在容器1里有如下内容：

viewModel: {
    data: {
        foo: 42
    }
}

这可以让所有的组件绑定{foo}.这常常用于绑定非常重要的档案数据（比如”当前用户”），不同层的应用都会用到这个数据。事实上，因为使用了Js原型链来表现数据，当属性的改变会被分享（其他地方也需要改变属性）的时候，在视图模型中出版（定义）对象是一个很好得选择。我们来看看为什么，考虑{foo}在容器2中的双向绑定：

{
    xtype: 'textfield',
    bind: '{foo}'
}

‘textfield’会因为Data2通过原型链从Data1那儿继承的数据而接受到’42’这个值。在容器2中产生的数据变化会存储在Data2中。数据的分叉可以很好得让不同的视图对应到不同的数据上，这样貌似在相同数据上的变化就不会相互之间产生影响，实际上他们是分开的，因为组件绑定到了不停的视图模型上，数据模型产生变化时是是一个的视图模型2中的set方法，同样的只有Data2产生了相应的数据变化。
为了使用这种灵活的继承方式，对象需要存储在根视图模型中：

viewModel: {
    data: {
        stuff: {
            foo: 42
        }
    }
}

现在双向绑定会在共享的stuff对象中更新foo属性：

{
    xtype: 'textfield',
    bind: '{stuff.foo}'
}

二、调度和依赖关系
快速实现数据绑定的关键是避免冗余或不必要的计算。绑定和计算之间的依赖关系（视图模型会生成一个线性表），数据在发生变化的时候表的处理会延迟。如果视图模型中会改变文本中的档案数据，不需要担心突然发生大量的重新计算。同样的，如果一个公式依赖于7个值，并且现在需要改变这7个值，公式只会被重新计算一次。更进一步的说，如果有7个公式，每个公式都是一条链，都依赖于不同的7个值，同时改变49个值也只是会重新计算一次。
为了达到以上的效果，这些依赖关系需要告知给视图模型，并且他们是非周期性的。在依赖中周期会报错。如下：

Ext.define('App.view.broken.BrokenModel', {
    extend: 'Ext.app.ViewModel',

    formulas: {
        bar: function (get) {
            return get('foo') / 2;
        },
        foo: function (get) {
            return get('bar') * 2;
        }
    }
});

在真实的项目中，bug可能不会那么明显，但是显然’foo’和’bar’都依赖于彼此，上面这个方法不会得到合适的答案。
三、公式依赖
当一个公式使用显示绑定的时候他的依赖关系将变得十分显著。当公式提供函数或者get方法得时候，视图模型会解析函数的文本并且寻找引用属性。虽然这个很方面吧，不过还是有局限的。
具体就去看看Ext.app.bind.Formula.https://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.app.bind.Formula