javascript - Extjs bound html not updating when viewmodel data is changed - Stack Overflow

admin管理员组

文章数量:1384656

I have a view that has the html config bound to data within my viewmodel.

The view

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

The 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];
        }
    }

});

When the view is initially rendered, the bound data populates into the HTML config as expected.

I then created a method in my viewcontroller to increment the date.

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

I'm sure this is leading to a facepalm moment, but I was expecting that when I update the selectedDate data in my viewmodel, it should trigger both bound pieces of my html config to update, but it's not.

The viewmodel data is definitely updating. If you inspect the dateChange variable in the viewcontroller when you click the increment button the second time you'll see that the date has indeed increased.

Is there something I'm missing as far as getting my bound config to update?

I have this here in a fiddle.

I have a view that has the html config bound to data within my viewmodel.

The view

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

The 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];
        }
    }

});

When the view is initially rendered, the bound data populates into the HTML config as expected.

I then created a method in my viewcontroller to increment the date.

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

I'm sure this is leading to a facepalm moment, but I was expecting that when I update the selectedDate data in my viewmodel, it should trigger both bound pieces of my html config to update, but it's not.

The viewmodel data is definitely updating. If you inspect the dateChange variable in the viewcontroller when you click the increment button the second time you'll see that the date has indeed increased.

Is there something I'm missing as far as getting my bound config to update?

I have this here in a fiddle.

• javascript
• extjs
• mvvm
• data-binding

Share Improve this question Follow edited Sep 26, 2015 at 19:02 Tarabass 3,15022 gold badges1919 silver badges3535 bronze badges asked Sep 26, 2015 at 16:28 Chris SchmitzChris Schmitz 21k3131 gold badges9090 silver badges154154 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

actually, you need Deep Binding.

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

sometimes you may need to be notified if any of the properties of that object change.

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

UPDATE: You need Deep Binding as @user2767141 wrote here instead of the ugly workaround I suggested.

---

Once I changed the line:

vm.set('selectedDate', dateChange);

To:

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

It works.

本文标签： javascriptExtjs bound html not updating when viewmodel data is changedStack Overflow