Question

是否可以强制Ember更新视图？因为我试图显示解析用户提交的文件的进度条。但是，只有在解析完成后才会更新进度，这在5-10秒内发生，因此在此时间内没有对用户的反馈。

模板：

<button {{action 'submitFile'}} type="submit" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-upload"></span>
</button>

<div class="progress">
    <div class="progress-bar" role="progressbar" {{bind-attr style=widthStyle}}>

    </div>
</div>

控制器：

App.IndexController = Ember.Controller.extend({
    actions : {
        submitFile : function(){
            this._getFileContent();
        }
    },

    parseProgress : 0,

    widthStyle: function() {
        return 'width: ' + this.get('parseProgress') + '%;';
    }.property('parseProgress'),


    _getFileContent : function(){
        console.log('Trying to retrieve file content...');
        var that = this;
        Filey.readText($('#inputFile').get()[0], function(fileContent){

            for(var i = 1; i < fileContent.length; i++){

                // some local(!) parsing happens here, quite CPU heavy

                //update progress
                that.set('parseProgress', Math.ceil(i/fileContent.length*100));
                that.notifyPropertyChange('widthStyle'); // would like to force update here!

            }
            // the view gets updated at some point after here
            console.log('all records parsed');
        });
    }
});

我想在fileContent上循环的每次迭代时更新视图。这可能/强制执行吗？

Answer 1

您的代码没问题。我猜你的cpu密集型本地解析代码搞乱了运行循环（参见：http://emberjs.com/guides/understanding-ember/run-loop/）。循环只是没有到达渲染队列。

比较这两个示例（代码的变体）：

阻止代码： http://emberjs.jsbin.com/tubim/2/edit

非阻塞： http://emberjs.jsbin.com/lovew/1/edit

因此，通过在区间函数中转换for（var i = 1; i＆lt; fileContent.length; i ++）循环，它应该可以工作。不完全确定这是贪婪的方式，以前从来没有处理过这个问题，但似乎有效。

强制更新计算属性的更新视图？

1 个答案: