从超时内部设置 ViewModel 数据值不会更新视图

Question

我需要从 setTimeout 回调函数中更新我的 ViewModel 数据，但它不起作用。看起来我运行遇到了一个类似于我需要在 Angular 之外更新 Angular 中的数据值然后需要调用 $scope.apply() 时发生的问题，但是在ExtJS 的方式。

代码如下：

Ext.define('Web.view.taskbar.clock.ClockController', {
    extend: 'Ext.app.ViewController',

    alias: 'controller.taskbar-clock',

    init: function() {
        var me = this;

        // this works
        var time = new Date();
        me.getViewModel().data.time = time.getHours() + ':' + time.getMinutes() + ':' + time.getSeconds(); 

        // this doesn't work
        var timer = function() {
            setTimeout(function() {
                var time = new Date();
                me.getViewModel().data.time = time.getHours() + ':' + time.getMinutes() + ':' + time.getSeconds(); 
                timer();
            }, 1000);
        };
        timer();
    }
});

编辑： 更新了工作代码

Ext.define('Web.view.taskbar.clock.ClockController', {
    extend: 'Ext.app.ViewController',

    alias: 'controller.taskbar-clock',

    init: function() {
        var vm = this.getViewModel();

        var timer = function() {
            setTimeout(function() {
                var time = new Date();
                vm.set('time', time.getHours() + ':' + time.getMinutes() + ':' + time.getSeconds()); 
                timer();
            }, 1000);
        }
        timer();
    }
});

Answer 1

您需要调用setter方法：link.

vm.set('time', 'x');

从超时内部设置 ViewModel 数据值不会更新视图

Set ViewModel data value from inside timeout doesn't update the View

extjs

extjs5