雙向綁定不更新視圖模型

我想在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，我在視圖中設置的值也不會發布到我的視圖模型中。我誤解了如何使用雙向綁定？

來源

2016-07-29 Will Kunkel

-2

這個替換您的console.log行：

console.log(myComponent.getThing());

來源

2016-07-30 04:43:37 Arvin

這將工作，但它缺少重點。我試圖更新視圖模型中的東西的價值。你告訴我從視圖中獲取它，這在實際用例中不起作用。 –

這個例子看看：Fiddle

這是你的榜樣的一個分支。我已經添加了幾件事情：

Ext.application與launch方法和放置myComponent建立在這裏。
呈現myComponent至Ext.getBody()。
thing配置的更新方法，它在更改時記錄其值。
a ViewModel binding，它在更改時記錄其值。

~~在viewmodel初始化之前，Ext沒有設置綁定。這隻有在視圖本身被初始化之後纔會發生。這就是爲什麼有必要呈現它。~~正如Mitchell Simoens正確指出的那樣，實例化一個視圖會初始化它和它的視圖模型，即使它沒有被渲染。然而在我的例子中，視圖模型綁定回調僅在我實際呈現視圖時才執行。

另外，請記住綁定是按計劃安排的，並且不會立即觸發。

如果你還沒有看到它，這裏的Ext JS's two-way binding example。

我希望這個澄清事情！

來源

2016-08-31 12:10:20

「在視圖模型初始化之前，Ext沒有設置綁定，直到視圖本身初始化纔會發生。」有點誤導。你可以實例化（它會調用initComponent，這可能意味着視圖被初始化），但不渲染它，視圖模型也被初始化。 –

感謝您的澄清。在我看到你的意思的例子後襬弄（雙關語意圖）之後。我已經更正了我的答案，現在希望它是準確的:) –

雙向綁定不更新視圖模型

回答

相關問題