How?
Prioritised queues!
var mybb = new backburner(['firstQ', 'secondQ', 'thirdQueue']);
mybb.run(function(){
mybb.scheduleOnce(queuename, target, method);
mybb.schedule(queuename, target, method);
});
app.TodoView = Backbone.View.extend({
initialize: function () {
this.listenTo(this.model, 'change', this.render);
},
render: function() {
}
});
model.set('firstName', 'Erik');
model.set('lastName', 'Bryn');
app.TodoView = Backbone.View.extend({
// ...
initialize: function () {
this.listenTo(this.model, 'change', this.render);
},
render: function() {
// put the rerender on the backburner!
backburner.deferOnce('render', this, this.actuallyRender);
},
actuallyRender: function() {
// do our DOM manipulations here. will only be called once.
}
// ...
});
// ... somewhere in our app code ...
backburner.run(function() {
model.set('firstName', 'Erik'); //you can pass {silent:true} to supress change
model.set('lastName', 'Bryn');
});
// our view has been rerendered only once, thanks to backburner!
Using Backburner.
var queuenames = ['render', 'afterRender'];
var backburnerSim = new backburner.Backburner(queuenames);
var j = 0;
var person = {'name':'PK'};
var self = this;
document.getElementById('withBB').addEventListener('click', function(){
backburnerSim.run(function(){
document.getElementById('bodyc').innerHTML = '';
self.setName('Ini');
self.setName('Mini');
self.setName('Maini');
self.setName('Mo');
document.getElementById(name).style.color = red;
//self.changeNameColor('named');
});
});
function setName(name){
person.name = name;
backburnerSim.scheduleOnce('render', setDomName);
}
i=0;
function setDomName(){
console.log(i);
var div = document.createElement('div');
div.id = 'named';
div.innerHTML = person.name + i;
div.style.border = '1px solid black';
div.style.height = '100px';
div.style.width = '100px';
document.getElementById('bodyc').appendChild(div);
i++;
}
function actualColorChange(name){
elem = document.getElementById(name);
elem.style["background-color"] = 'red';
}
function changeNameColor(name){
var elem;
backburnerSim.scheduleOnce('afterRender', this, actualColorChange, name);
}
backburnerSim.run(function(){
document.getElementById('bodyc').innerHTML = '';
self.setName('Ini');
self.setName('Mini');
self.setName('Maini');
self.setName('Mo');
//document.getElementById(name).style.color = red;
self.changeNameColor('named');
});
http://jsbin.com/megaj/2/edit