65.9K
CodeProject 正在变化。 阅读更多。
Home

Ext JS MVVM技巧：第1部分。自绑定

Alexey Solonets
starIconstarIconstarIconstarIconstarIcon

5.00/5 (3投票s)

2017 年 3 月 24 日

CPOL

4分钟阅读

viewsIcon

18068

在本技巧中，您将学习如何创建一个具有配置属性的组件，并使用MVVM将其绑定到这些属性。

引言

本技巧是为那些希望从Ext JS中的MVVM中榨取更多价值的高级用户而创建的，对于那些直觉上认为某些事情可以做得更好的人。

在这一部分中，我们将回顾一种自绑定技巧。它是什么？简而言之，它是在自定义组件内的数据绑定。

这与封装原则相关。当您创建自己的具有其配置属性（配置）的组件时，您希望将它们绑定到某些内部组件。例如，将projectName配置显示在标签中，或者使用locked标志来影响某些字段的可用性。

让我们探讨一下实现此目的的方法。

背景

这是Sencha的官方MVVM指南：视图模型和绑定。

在这些示例中，Sencha对所有内容都使用一个ViewModel。并在一个视图中绑定数据。这对于小型项目是可以接受的，但对于大型项目来说，这肯定会成为一个问题。总有一天，您会想到创建独立的、可重用的组件，并同时使用MVVM的优势。

示例

看看这个例子。在这里，我们想创建一个可重用的组件，一个带有用户的网格。'删除'按钮包含所选用户的名称。网格可以使用配置属性锁定以进行更改。我们称之为readOnly。在此示例中，我们将在组件外部使用“设置只读”按钮来实现。我们还希望绑定到外部容器中的网格选择。

我们的目标

  • 使用配置属性来更改组件的状态
  • 使用MVVM的优势。没有处理程序，只有数据绑定
  • 能够在具有其自己的ViewModel或没有ViewModel的容器中使用网格

问题

如果我们开始，我们将面临框架的一些限制

  • 组件无法在其配置属性和内部组件之间进行绑定。
  • 如果内部组件具有ViewModel（票号#EXTJS-15503），则外部组件无法绑定到组件的发布属性。

它们在我看来很奇怪，所以我决定做一个修复。它被称为Ext.vmx.mixin.Bindable，它解决了这些问题。

Using the Code

因此，使用此修复程序，我们可以编写我们想要的组件。看看这段代码。

/**
A reusable users grid
*/
Ext.define('Fiddle.view.UsersGrid', {
    extend: 'Ext.grid.Panel',
    xtype: 'usersgrid',
    
    viewModel: {
        
    },
    
    config: {
        readOnly: false
    },
    
    publishes: ['readOnly'],
    
    tbar: [{
        text: 'Add',
        itemId: 'addButton',
        bind: {
            disabled: '{readOnly}'
        }
    }, {
        text: 'Remove',
        itemId: 'removeButton',
        bind: {
            disabled: '{readOnly}',
            text: 'Remove {selection.name}'
        }
    }],
    
    columns: [{
        dataIndex: 'id',
        header: 'id'
    }, {
        dataIndex: 'name',
        header: 'name'
    }]
});

看起来很优雅，对吧？ 这是我们所做的

  • 定义一个空的viewModel
  • 定义一个readOnly 配置
  • 在publishes部分中将其标记为已发布
  • 创建到readOnly配置的数据绑定
  • 创建到selection配置的数据绑定。它也被Ext.grid.Panel标记为已发布

优点

那么它有什么好处呢？ 有一些我个人喜欢的东西

  • 该组件现在更加独立。您可以在具有或不具有ViewModel的容器中使用它。现在没有区别。
  • 您不需要在ViewModel中定义任何内容。这会通过publishes部分自动完成。
  • 您可以自由地为您的配置属性创建任何处理程序。一切都由MVVM引擎处理。所以代码变得更小。

我已经将此扩展用于我的项目大约2年了，并且没有任何问题。它是向后兼容的，因此您可以在项目中使用它，而不会破坏任何东西。

不要忘记将'Ext.vmx.mixin.Bindable'包含在应用程序的requires部分中。

缺点

使用此方法时，我们需要记住的一件事。“不要将数据对象嵌套得比必要的更深” - 来自Sencha的建议。 否则，我们可能会遇到性能问题。 例如，我不会创建一个递归的评论树，其中每个评论都显示在具有ViewModel的组件中。 但是我没有遇到3-4级ViewModel层次结构的性能下降。

来源

好的，如果您喜欢它，请查看Sencha Fiddle上的在线演示

以及GitHub上的源代码

待续

在第二部分中，我们将谈论在Ext JS MVVM方面更强的组件隔离。 目前，您可能仍然会搞乱ViewModel层次结构，数据名称，它们是否应该唯一，是否应该使用引用以及它们为什么仅在一个方向上起作用等。 因此，在下一部分中，我们将讨论如何在不断增长的项目中使MVVM更具可预测性。

更新

  • 修复了缺少的图像
© . All rights reserved.