View Models & Data Binding

数据绑定和为其提供支持的 ViewModel 是 Ext JS 的强大补充。
它们共同使您能够用更少的代码做更多的事情，并以更声明式的方式编写代码，同时帮助您保持关注点的清晰分离。

ViewModel 是一个管理数据对象的类。然后，它允许那些对这些数据感兴趣的人绑定到它，并在数据更改时收到通知。与 ViewController 一样，ViewModel 由引用它的视图拥有。由于 ViewModels 与视图关联，因此它们也能够链接到组件层次结构中祖先组件拥有的父 ViewModel。这允许子视图简单地“继承”其父 ViewModel 的数据。

组件具有 bind 配置，允许它们将其许多配置与 ViewModel 中的数据关联。使用 bind，您可以确保每当绑定的值更改时，都会调用相应的组件 config 的 setter 方法 - 无需自定义事件处理程序。

在本指南中，我们将逐步介绍一些示例，这些示例展示了 ViewModel 和数据绑定的强大功能。

组件绑定

理解绑定和 ViewModels 的最佳方法可能是查看可以在组件上使用绑定的各种方式。这是因为组件是数据绑定的主要使用者，而组件是 Ext JS 开发人员熟悉的东西。但是，为了使绑定工作，我们确实需要一个 ViewModel，因此我们现在将引用一个 ViewModel，稍后定义它。

绑定和 Configs

组件绑定是将来自 Ext.app.ViewModel 的数据连接到组件的配置属性的过程。组件拥有的任何配置都可以绑定，只要它具有 setter 方法即可。例如，由于 Ext.panel.Panel 上有一个 setTitle() 方法，因此您可以绑定到 title 配置。

在此示例中，我们将根据 ViewModel 的 data 的结果设置面板的 width。我们可以将数据绑定到 width，因为 setWidth() 是 Ext.panel.Panel 可以使用的方法。

Ext.create('Ext.panel.Panel', {
    title: 'Simple Form',

    viewModel: {
        type: 'test'  // we will define the "test" ViewModel soon
    },

    bind: {
        html: '<p>Hello {name}</p>',
        width: '{someWidth}'
    }
});

用于绑定值的语法与 Ext.Template 非常相似。您可以将文本放在大括号内的令牌周围。您也可以使用格式化程序，就像 Ext.Template 一样。但是，与 Ext.Template 不同，当模板是单个令牌（例如“{someWidth}”）时，其值将未经修改地传递。也就是说，它不会转换为字符串。

稍后我们将看到如何定义 name 和 someWidth 的数据。上面的示例仅显示了组件如何使用数据。

绑定布尔 Configs

您要绑定的许多 config 都是布尔值，例如 visible（或 hidden）、disabled、checked 和 pressed。绑定模板支持模板中的布尔否定“内联”。代数的其他形式被降级为公式（见下文），但布尔反转足够常见，因此有特殊规定。例如

Ext.create('Ext.panel.Panel', {
    title: 'Simple Form',

    viewModel: {
        type: 'test'
    },

    items: [{
        xtype: 'button',
        bind: {
            hidden: '{!name}'  // negated
        }
    }]
});

这也突出了单个令牌模板中的值不会转换为字符串。在上面，虽然“name”是字符串值，但它使用“!”取反，并变为布尔值，并传递给按钮上的 setHidden 方法。

绑定和优先级

绑定的 config 属性始终会在绑定结果可用后立即覆盖组件上静态设置的配置。换句话说，绑定数据将始终优先于静态配置值，但可能会延迟以获取该数据。

Ext.create('Ext.panel.Panel', {
    title: 'Simple Form',

    viewModel: {
        type: 'test'
    },

    bind: {
        title: 'Hello {name}'
    }
});

一旦交付“name”的绑定，“Simple Form”标题将被替换。

绑定和子组件

绑定最有用的部分之一是，具有 viewModel 的组件的所有子项也可以访问其容器的数据。

在此示例中，您可以看到表单的子项可以绑定到其容器的 viewModel。

Ext.create('Ext.panel.Panel', {
    title: 'Simple Form',

    viewModel: {
        type: 'test'
    },

    layout: 'form',
    defaultType: 'textfield',

    items: [{
        fieldLabel: 'First Name',
        bind: '{firstName}' // uses "test" ViewModel from parent
    },{
        fieldLabel: 'Last Name',
        bind: '{lastName}'
    }]
});

双向绑定

bind 配置还允许双向数据绑定，这转化为视图和模型之间的数据实时同步。在视图中所做的任何数据更改都会自动写回模型。这会自动更新可能绑定到同一数据的任何其他组件。注意：并非所有 config 都会在更改时将其值发布到 ViewModel。
在 publish 和 twoWayBindable 数组中定义的 Config 将更改发布回 ViewModel。值也可以使用 publishState 方法在组件/应用程序逻辑中发布。

在上面的示例中，由于“firstName”和“lastName”属性已绑定到文本字段，因此输入中的更改将写回 ViewModel。要了解所有这些是如何连接的，现在是时候完成示例并定义 ViewModel 了。

Ext.define('MyApp.view.TestViewModel', {
    extend: 'Ext.app.ViewModel',

    alias: 'viewmodel.test', // connects to viewModel/type below

    data: {
        firstName: 'John',
        lastName: 'Doe'
    },

    formulas: {
        // We'll explain formulas in more detail soon.
        name: function (get) {
            var fn = get('firstName'), ln = get('lastName');
            return (fn && ln) ? (fn + ' ' + ln) : (fn || ln || '');
        }
    }
});

Ext.define('MyApp.view.TestView', {
    extend: 'Ext.panel.Panel',
    layout: 'form',

    // Always use this form when defining a view class. This
    // allows the creator of the component to pass data without
    // erasing the ViewModel type that we want.
    viewModel: {
        type: 'test'  // references alias "viewmodel.test"
    },

    bind: {
        title: 'Hello {name}'
    },

    defaultType: 'textfield',
    items: [{
        fieldLabel: 'First Name',
        bind: '{firstName}'
    },{
        fieldLabel: 'Last Name',
        bind: '{lastName}'
    },{
        xtype: 'button',
        text: 'Submit',
        bind: {
            hidden: '{!name}'
        }
    }]
});

Ext.onReady(function () {
    Ext.create('MyApp.view.TestView', {
        renderTo: Ext.getBody(),
        width: 400
    });
});

当显示上面的面板时，我们可以看到文本字段中的更改反映在面板 title 以及“Submit”按钮的 hidden 状态中。

绑定和组件状态

有时，组件的状态（例如复选框的 checked 状态或网格的选定记录）对于其他组件很有趣。当组件被分配一个 reference 来标识它时，该组件将在 ViewModel 中发布其一些关键属性。

在此示例中，我们已将“Admin Key”文本字段的 disabled config 绑定到复选框的 checked 状态。这导致文本字段在复选框被选中之前被禁用。这种行为非常适合像这样的动态表单

Ext.create('Ext.panel.Panel', {
    title: 'Sign Up Form',

    viewModel: {
        type: 'test'
    },

    items: [{
        xtype: 'checkbox',
        boxLabel: 'Is Admin',
        reference: 'isAdmin'
    },{
        xtype: 'textfield',
        fieldLabel: 'Admin Key',
        bind: {
            disabled: '{!isAdmin.checked}'
        }
    }]
});

绑定描述符

到目前为止，我们已经看到了三种基本形式的绑定描述符

• {firstName} - “直接绑定”到 ViewModel 中的某个值。此值未经修改地传递，因此可能作为任何数据类型到达。

• Hello {name} - “绑定模板”始终通过插入各种绑定表达式的文本值来生成字符串。绑定模板也可以像普通 Ext.Template 一样使用格式化程序，例如：'Hello {name:capitalize}'。

• {!isAdmin.checked} - 直接绑定的否定形式，对于绑定到布尔 config 属性很有用。

除了这些基本形式之外，您还可以使用一些专门形式的绑定描述符。

多重绑定

如果将对象或数组作为绑定描述符给出，则 ViewModel 将生成形状相同的对象或数组，但各个属性将替换为其绑定结果。例如

Ext.create('Ext.Component', {
    bind: {
        data: {
            fname: '{firstName}',
            lname: '{lastName}'
        }
    }
});

这将组件的“data”config 设置为一个对象，该对象具有两个属性，其值从 ViewModel 设置。

记录绑定

当需要特定记录时，例如 id 为 42 的“User”，绑定描述符是一个对象，但具有“reference”属性。例如

Ext.create('Ext.Component', {
    bind: {
        data: {
            reference: 'User',
            id: 42
        }
    }
});

在这种情况下，一旦加载 User 记录，组件的 tpl 将接收该记录。这目前需要使用 Ext.data.Session。

关联绑定

与记录绑定类似，也可以绑定到关联，例如用户的 Address 记录

Ext.create('Ext.Component', {
    bind: {
        data: {
            reference: 'User',
            id: 42,
            association: 'address'
        }
    }
});

在这种情况下，一旦加载用户的“address”记录，组件的 tpl 将接收该记录。这也目前需要使用 Ext.data.Session。

绑定选项

当您需要描述绑定选项时，使用绑定描述符的最终形式。以下示例显示了如何仅接收绑定的一个值，然后自动断开连接。

Ext.create('Ext.Component', {
    bind: {
        data: {
            bindTo: '{name}',
            single: true
        }
    }
});

bindTo 属性是绑定描述符对象中的第二个保留名称（第一个是 reference）。当存在时，它表示 bindTo 的值是实际的绑定描述符，而其他属性是绑定的配置选项。

当前支持的其他绑定选项是 deep。当绑定到对象时，使用此选项，以便在对象的任何属性更改时（而不仅仅是引用本身）通知绑定。当绑定到组件的 data config 时，这将最有用，因为这些 config 通常接收对象。

Ext.create('Ext.Component', {
    bind: {
        data: {
            bindTo: '{someObject}',
            deep: true
        }
    }
});

创建 ViewModels

现在我们已经了解了组件如何使用 ViewModels，并了解了 ViewModels 的外观，现在是时候了解有关 ViewModels 及其提供的功能的更多信息了。

如前所述，ViewModel 是底层 data 对象的管理器。正是该对象的内容正被绑定语句使用。从父 ViewModel 到其子 ViewModel 的数据继承利用了 JavaScript 原型链。这在 View Model Internals 指南中进行了更详细的介绍，但简而言之，子 ViewModel 的 data 对象以其父 ViewModel 的 data 对象作为其原型。

公式

除了保存数据和提供绑定之外，ViewModels 还提供了一种便捷的方式来计算来自其他数据的数据，称为 formulas（公式）。公式允许您将数据依赖关系封装在 ViewModel 中，并使您的视图能够专注于声明其结构。

换句话说，数据不会在 ViewModel 的数据中更改，但可以通过使用公式转换数据来以不同的方式显示。这类似于传统数据模型的字段的 convert 配置的工作方式。

我们在之前的示例中看到了一个简单的“name”公式。 在那种情况下，“name”公式只是一个函数，它组合了 ViewModel 中的另外两个值：“firstName”和“lastName”。

公式还可以使用其他公式的结果，就像结果只是另一个数据属性一样。 例如

Ext.define('MyApp.view.TestViewModel2', {
    extend: 'Ext.app.ViewModel',

    alias: 'viewmodel.test2',

    formulas: {
        x2y: function (get) {
            return get('x2') * get('y');
        },

        x2: function (get) {
            return get('x') * 2;
        }
    }
});

“x2”公式使用“x”属性将“x2”定义为“x * 2”。 “x2y”公式同时使用“x2”和“y”。 此定义意味着如果“x”更改，则会重新计算“x2”，然后重新计算“x2y”。 但是，如果“y”更改，则只需要重新计算“x2y”。

带有显式绑定的公式

在上面的示例中，公式的依赖关系是通过检查函数找到的，但这并不总是最佳解决方案。 可以使用显式 bind 语句，当 bind 中的所有值都呈现时，它将返回一个简单的对象。

Ext.define('MyApp.view.TestViewModel2', {
    extend: 'Ext.app.ViewModel',

    alias: 'viewmodel.test2',

    formulas: {
        something: {
            bind: {
                x: '{foo.bar.x}',
                y: '{bar.foo.thing.zip.y}'
            },

            get: function (data) {
                return data.x + data.y;
            }
        }
    }
});

双向公式

当公式是可逆的时，我们还可以定义一个 set 方法，以便在设置值时（例如通过双向绑定）调用。 由于“this”指针是 ViewModel，因此 set 方法可以调用 this.set() 以在 ViewModel 中设置相应的属性。

下面 TestViewModel 的修订版本展示了如何将“name”定义为双向公式。

Ext.define('MyApp.view.TestViewModel', {
    extend: 'Ext.app.ViewModel',

    alias: 'viewmodel.test',

    formulas: {
        name: {
            get: function (get) {
                var fn = get('firstName'), ln = get('lastName');
                return (fn && ln) ? (fn + ' ' + ln) : (fn || ln || '');
            },

            set: function (value) {
                var space = value.indexOf(' '),
                    split = (space < 0) ? value.length : space;

                this.set({
                    firstName: value.substring(0, split),
                    lastName: value.substring(split + 1)
                });
            }
        }
    }
});

建议

凭借 ViewModels、公式和数据绑定的所有强大功能，很容易过度使用或滥用这些机制，并创建一个难以理解或调试、更新缓慢或内存泄漏的应用程序。 为了帮助避免这些问题，并仍然充分利用 ViewModels，以下是一些推荐的技术

• 在配置 viewModel 时，始终使用以下形式。 这很重要，因为 Config System 合并配置值的方式。 使用这种形式，“type”属性在合并期间得以保留。

    Ext.define('MyApp.view.TestView', {
        //...
        viewModel: {
            type: 'test'
        },
    });
  

• 使名称显而易见，尤其是在高级 ViewModel 中。 在 JavaScript 中，我们依赖于文本搜索，因此请选择使查找用法成为可能的名称。 可能使用属性的代码越多，选择有意义甚至唯一的名称就越重要。

• 不要将数据嵌套在对象中超过必要的深度。 与包含许多嵌套子对象的单个对象相比，存储在 ViewModel 中的多个顶级对象将需要更少的簿记。 此外，这将有助于使对此信息的依赖关系比许多组件依赖于某个大型包含对象时更明显。 有共享对象的原因，但请记住 ViewModel 只是一个托管对象，您也可以使用其属性。

• 使用子 ViewModels 来允许清理数据，以及需要它的组件。 如果将所有数据都放在高级 ViewModels 中，则即使在需要它的子视图被销毁后，这些数据也可能永远不会被删除。 相反，为子视图创建 ViewModels，并将数据传递到其 ViewModel 中。

• 除非实际需要，否则不要创建子 ViewModels。 每个 ViewModel 实例都需要时间来创建和内存来管理。 如果子视图不需要其自身唯一的数据，它可以简单地使用它从其容器继承的 ViewModel。 但是，请参阅之前的建议，因为当需要子 ViewModels 时创建它们比污染父 ViewModel 并有效地泄漏内存更好。

• 使用公式而不是重复绑定。 如果您了解公式是如何组合几个绑定值的结果的方式，您可能会明白，与在许多地方直接使用这些相同的值相比，使用公式将有助于减少依赖项的数量。 例如，一个具有 3 个依赖项和 4 个用户的公式使 ViewModel 中需要跟踪的依赖项为 3 + 4 = 7 个。 与 4 个用户自身具有这 3 个依赖项相比，我们将有 3 * 4 = 12 个依赖项。 需要跟踪的依赖项越少，意味着使用的内存和处理它们的时间就越少。

• 不要过度深入地链接公式。 这与其说是运行时成本问题，不如说是代码清晰度问题。 链式公式会掩盖数据和组件之间的连接，从而难以理解正在发生的事情。

• 双向公式必须是稳定的。 假设公式“foo”是对值“bar”的计算。 当设置“foo”时，它将通过反转其 get 方法中的公式来设置“bar”。 如果 get 方法将为现在正在设置的“foo”生成完全相同的值，则结果是稳定的。 如果不是，该过程将循环直到达到稳定点，否则将无限期地继续下去。 这两种结果都不是理想的结果。

延伸阅读

有关 viewModels 的更多信息，请花几分钟时间查看我们的 ViewModel 内部指南。