Question

我有一个视图，其html配置绑定到我的viewmodel中的数据。

视图

Ext.define('MyApp.MyView',{
    extend: 'Ext.Panel',
    renderTo: Ext.getBody(),
    height: 300,
    controller: 'myviewcontroller',
    viewModel:{
        type: 'myviewmodel'
    },

    title: 'Testing formula updates',
    bind:{
        html: 'Date: <b>{selectedDate}</b>, <br />Month: <b>{currentMonth}</b>'
    },

    bbar:[
        {xtype: 'button', text: 'Increment Month', handler: 'onIncrementMonth'}
    ]
});

ViewModel

Ext.define('MyApp.MyViewModel',{
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.myviewmodel',

    data:{
        selectedDate: new Date()
    },
    formulas:{
        currentMonth: function (get){
            var monthNames = ["January", "February", "March", "April", "May", "June","July", "August", "September", "October", "November", "December"];
            var monthNumber = get('selectedDate').getMonth();
            return monthNames[monthNumber];
        }
    }

});

最初呈现视图时，绑定数据会按预期填充到HTML配置中。

然后我在viewcontroller中创建了一个方法来增加日期。

ViewController

Ext.define('MyApp.MyViewController',{
    extend: 'Ext.app.ViewController',
    alias: 'controller.myviewcontroller',

    onIncrementMonth: function (){
        var vm = this.getViewModel();
        var dateChange = vm.get('selectedDate');

        dateChange.setMonth(dateChange.getMonth() + 1);

        vm.set('selectedDate', dateChange);
    }
});

我确定这会导致一个facepalm时刻，但我期待当我更新我的viewmodel中的selectedDate数据时，它应该触发我的html配置的两个绑定部分进行更新，但是不是。

viewmodel数据肯定会更新。如果您在第二次单击增量按钮时检查视图控制器中的dateChange变量，那么您将看到日期确实已增加。

在我的绑定配置更新时，我是否遗漏了一些东西？

我有here in a fiddle。

Answer 1

实际上，你需要深层绑定。

REF： http://docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/Ext.app.ViewModel

有时，如果该对象的任何属性发生变化，您可能需要得到通知。

viewModel.bind({
     bindTo: '{someObject}',
     deep: true
 },
 function (someObject) {
     // called when reference changes or *any* property changes
 });

Answer 2

更新：您需要Deep Binding，因为@ user2767141写了here而不是我建议的丑陋的解决方法。

我换了一行后：

vm.set('selectedDate', dateChange);

要：

vm.set('selectedDate', new Date(dateChange));

有效。

当viewmodel数据发生更改时，Extjs绑定html不会更新

视图

ViewModel

ViewController

2 个答案: