雙向綁定不更新視圖模型

Question

我正在嘗試在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);

我在這里也有一個Sencha小提琴： https ： //fiddle.sencha.com/#fiddle/1efk

我希望運行此代碼的目的是查看記錄到控制台a new value 。 相反，我得到了null 。 即使我已設置bind和twoWayBindable ，我的視圖上設置的值也不會發布到我的視圖模型。 我誤解了如何使用雙向綁定嗎？

Answer 1

看看這個例子： 小提琴

這是你的例子的一個分支。 我添加了一些東西：

• 使用launch方法的Ext.application並在此處創建myComponent 。
• 將myComponent渲染為Ext.getBody() 。
• thing配置的更新方法，在更改時記錄其值。
• 一個ViewModel綁定 ，它在更改時記錄其值。

在初始化viewmodel之前，Ext不會設置綁定。 直到視圖本身被初始化才會發生這種情況。 這就是為什么有必要渲染它的原因。 正如Mitchell Simoens正確指出的那樣，實例化視圖將初始化它及其視圖模型，即使它沒有被渲染。 但是，在我的示例中，viewmodel綁定回調僅在我實際呈現視圖時執行。

此外，請記住綁定已安排，不會立即觸發。

如果您還沒有看到它，這里是Ext JS的雙向綁定示例 。

我希望這能澄清事情！

Answer 2

用這個替換你的console.log行：

console.log(myComponent.getThing());