javascript - How to add class after append in Backbone.js? -

back again question todo-app.

currently development going good. it's possible add todo's, delete todo's, edit todo's , 'finish' todo's.

you can see result far here: http://todoapp.lusenet.com/

the app contains views: todoview , appview. appview renders application using todoview.

when application gets loaded, initialize function of appview gets called. happens there:

initialize: function(){     this.input = this.$('#addtodo');     this.todocollection = new app.todocollection(); // create collection     this.todocollection.fetch({reset: true}); // fetch items      this.listento(this.todocollection, 'reset', this.addall);     this.listento(this.todocollection, 'add', this.addone); } 

so create new collection, fetch models in there, fires reset event. reset calls addall function.

this addall function:

addall: function(){     var = 0,         self = this;      this.$('#todolist').html(''); // clean todo list     this.todocollection.each(function(todo){         i++;         settimeout(function(){             self.addone(todo);         }, 200*i);     }); } 

this function loops through entire collection , calls addone every model. done in timeout models appended 1 after another.

this addone function:

addone: function(todo){     var view = new app.todoview({model: todo}).render();     $(view.el).appendto('#todolist'); } 

here troubles start. addone function appends model list, fine. when add css model:

-webkit-transition: 2000ms ease-out; -moz-transition: 2000ms ease-out; -ms-transition: 2000ms ease-out; -o-transition: 2000ms ease-out; transition: 2000ms ease-out; bottom:-2px; opacity: 0; 

the model hidden when added, want. figured, if call addclass after append, can animate model. added 1 line of code make addone function this:

addone: function(todo){     var view = new app.todoview({model: todo}).render();     $(view.el).appendto('#todolist');     view.$el.addclass('show'); } 

this works, model has class 'show' when append it, no fade in happens. how can add class after append done? or doing wrong?

thanks!

perhaps browser doesn't have enough time insert element dom before class added.

i'd try using settimeout, , don't need large values there.

addone: function(todo){     var view = new app.todoview({model: todo}).render();     view.$el.appendto('#todolist');     settimeout(function(){         view.$el.addclass('show');     }, 40); } 

this known trick, , some people call 0 timeout.