如何在追加Backbone.js後添加類？

Question

再回到另一個關於我的待辦事項的問題。

目前開發進展順利。現在可以添加待辦事項，刪除待辦事項，編輯待辦事項和「完成」待辦事項。

你可以看到到目前爲止的結果在這裏：http://todoapp.lusenet.com/

該應用程序包含視圖：TodoView和APPVIEW。 AppView使用TodoView呈現應用程序。

當應用程序被加載時，AppView的initialize函數被調用。這是發生了什麼有：

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

所以我創建了一個新的集合，取的是那裏的模型，這將觸發reset事件。 reset然後調用addAll函數。

這是addAll功能：

addAll: function(){ 
    var i = 0, 
     self = this; 

    this.$('#todoList').html(''); // clean the todo list 
    this.todoCollection.each(function(todo){ 
     i++; 
     setTimeout(function(){ 
      self.addOne(todo); 
     }, 200*i); 
    }); 
} 

此功能只是遍歷整個集合，併爲每個模型調用addOne。這是在超時完成的，以便模型被一個接一個地追加。

這是addOne功能：

addOne: function(todo){ 
    var view = new app.TodoView({model: todo}).render(); 
    $(view.el).appendTo('#todoList'); 
} 

這裏我的麻煩開始。 addOne函數附加模型列表，這是完全正確的。當我將此CSS添加到模型中時：

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

模型在添加時隱藏，這正是我想要的。我想，如果我在追加後打電話addClass，我可以爲模型製作動畫。所以我添加一行代碼，使addOne功能是這樣的：

addOne: function(todo){ 
    var view = new app.TodoView({model: todo}).render(); 
    $(view.el).appendTo('#todoList'); 
    view.$el.addClass('show'); 
} 

這工作，只有模型已經擁有了一流的「秀」，當我將其追加，在發生如此不褪色。如何在追加完成後添加類？或者我只是做了完全錯誤的？

謝謝！

Answer 1

也許在添加類之前，瀏覽器沒有足夠的時間將元素實際插入到DOM中。

我想嘗試使用setTimeout，你真的不需要大的值。

addOne: function(todo){ 
    var view = new app.TodoView({model: todo}).render(); 
    view.$el.appendTo('#todoList'); 
    setTimeout(function(){ 
     view.$el.addClass('show'); 
    }, 40); 
} 

這實際上是一個已知的把戲，並且some people even call it with 0 timeout。