javascript - 如何在 Backbone.js 中追加后添加类？

Question

关于我的待办事项应用程序的另一个问题再次返回。

目前开发进展顺利。现在可以添加待办事项、删除待办事项、编辑待办事项和“完成”待办事项。

到目前为止，您可以在这里看到结果:http://todoapp.lusenet.com/

应用程序包含 View :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 .