双向绑定不更新视图模型答案

【问题标题】：Two-way binding not updating view model双向绑定不更新视图模型
【发布时间】：2016-07-29 18:23:18
【问题描述】：

我正在尝试在 Ext JS 6.0.2 组件中使用双向绑定。但是，据我所知，它并没有达到我的预期，或者根本没有。我创建了一个最小的示例：

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

我这里还有一个煎茶小提琴：https://fiddle.sencha.com/#fiddle/1efk

运行此代码的期望是看到a new value 登录到控制台。相反，我得到null。即使我设置了bind 和twoWayBindable，在我的视图上设置的值也不会发布到我的视图模型中。我是否误解了如何使用双向绑定？

【问题讨论】：

标签： javascript extjs extjs6

【解决方案1】：

看看这个例子：Fiddle

这是你的例子的一个分支。我添加了一些东西：

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

~~在视图模型初始化之前，Ext 不会设置绑定。在视图本身初始化之前不会发生这种情况。这就是为什么需要渲染它的原因。~~ 正如 Mitchell Simoens 正确指出的那样，实例化视图将初始化它及其视图模型，即使它没有被渲染。然而，在我的示例中，视图模型绑定回调仅在我实际渲染视图时执行。

另外，请记住，绑定是计划好的，不会立即触发。

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

我希望这可以澄清事情！

【讨论】：

"Ext 在视图模型初始化之前不会设置绑定。这在视图本身初始化之前不会发生。"有点误导。您可以实例化（这将调用 initComponent 这可能意味着视图已初始化）但不渲染它并且视图模型也已初始化。
感谢您的澄清。在摆弄（双关语）之后，我看到了你的意思。我已经更正了我的答案，希望现在是准确的:)

【解决方案2】：

用这个替换你的console.log 行：

console.log(myComponent.getThing());

【讨论】：

这会起作用，但它没有抓住重点。我正在尝试更新视图模型中事物的值。您是在告诉我从视图中获取它，这在实际用例中是行不通的。