CODEWITHSUNDEEP
ember.js
rob
rob

Reputation: 3022

Force update view on change of computed property?

Is it possible to force Ember to update the view? Because I'm trying to display a progress bar of the parsing of a file the user submitted. But what happens is that the progress is only updated once the parsing is finished which happens within 5-10 seconds, so there is no feedback to the user within this time.

Template:

<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>

Controller:

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

I would like to update the view with every iteration of the loop over fileContent. Is this possible/enforcebale?

Upvotes: 1

Views: 769

Answers (1)

Bavo Van Geit
Bavo Van Geit

Reputation: 852

Your code is ok. I'm guessing that your cpu intensive local parsing code is messing up the run loop (see: http://emberjs.com/guides/understanding-ember/run-loop/). The loop just doesn't get to the render queue.

compare these two examples (variations on your code):

blocking code: http://emberjs.jsbin.com/tubim/2/edit

non blocking: http://emberjs.jsbin.com/lovew/1/edit

So by converting the for(var i = 1; i < fileContent.length; i++) loop in an interval function it should work. Not entirely sure this is the ember way, never had to deal with that problem before, but it seems to work.

Upvotes: 2

Related Questions