Extjs绑定的html在视图模型数据改变时不更新

Question

我有一个视图，它有html配置绑定到我的视图模型中的数据。

视图

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

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

我敢肯定这是导致一个尴尬的时刻，但我期待，当我更新selectedDate数据在我的视图模型，它应该触发我的html配置的两个绑定块更新，但它不是。

视图模型数据肯定在更新。如果你在视图控制器中检查dateChange变量，当你第二次点击增量按钮时，你会看到日期确实增加了。

是否有一些东西我错过了得到我的绑定配置更新?

我在这里有一个小提琴

Answer 1

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

参考: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

更新:你需要像@user2767141那样的深度绑定，而不是我建议的丑陋的解决方案。

---

一旦我改变了行:

vm.set('selectedDate', dateChange);

:

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

。