javascript - 双向绑定(bind)不更新 View 模型

Question

我正在尝试在 Ext JS 6.0.2 组件中使用双向绑定(bind)。但是，据我所知，它并没有像我期望的那样工作，或者根本没有工作。我创建了一个最小示例:

Ext.define('MyComponentController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.mycomponent'
});

Ext.define('MyComponentModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.mycomponent'
});

Ext.define('MyComponent', {
    extend: 'Ext.Component',
    xtype: 'mycomponent',

    viewModel: {
        type: 'mycomponent'
    },
    controller: 'mycomponent',

    config: {
        thing: 'a defualt value'
    },
    bind: {
        thing: '{thing}'
    },
    twoWayBindable: 'thing'
});

var myComponent = Ext.create('MyComponent', {
    thing: 'a new value'
});

// Use setTimeout to give bindings time to update.
setTimeout(function() {
    console.log(myComponent.getViewModel().get('thing'));
}, 1000);

我这里还有一个 Sencha fiddle :https://fiddle.sencha.com/#fiddle/1efk

我期望运行此代码的是看到 一个新值 记录到控制台。相反，我得到 null。即使我设置了 bind 和 twoWayBindable，我的 View 上设置的值也没有发布到我的 View 模型。我是否误解了如何使用双向绑定(bind)？

Answer 1

看看这个例子:Fiddle

这是您示例的一个分支。我添加了一些东西:

• Ext.application 带有 launch 方法，并将 myComponent 的创建放在此处。
• 将 myComponent 呈现给 Ext.getBody()。
• thing 配置的更新方法，它在更改时记录其值。
• 一个ViewModel binding ，它在更改时记录其值。

Ext 在初始化 View 模型之前不会设置绑定(bind)。这不会发生，直到 View 本身被初始化。这就是为什么需要渲染它的原因。 正如 Mitchell Simoens 正确指出的那样，实例化一个 View 将初始化它及其 View 模型，即使它没有被渲染。然而，在我的示例中，viewmodel 绑定(bind)回调仅在我实际呈现 View 时执行。

另外，请记住绑定(bind)是有计划的，不会立即触发。

如果您还没有看到，这里是 Ext JS's two-way binding example .

我希望这能澄清事情!