Reputation: 3022
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
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