更改视图模型数据时，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'}
    ]
});

视图模型

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 配置中。

然后我在视图控制器中创建了一个方法来增加日期。

视图控制器

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 配置的两个绑定部分进行更新，但事实并非如此。

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

就更新绑定配置而言，我是否缺少什么？

我有这个here in a fiddle。

Answer 1

实际上，您需要 Deep Binding。

参考： 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 写了here，而不是我建议的丑陋解决方法。

---

一旦我换了行：

vm.set('selectedDate', dateChange);

收件人：

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

有效。