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

How to add class after append in Backbone.js?

本文关键字：追加 添加 js Backbone      更新时间：2023-09-26

再次提出关于我的todo应用程序的另一个问题。

目前发展情况良好。现在可以添加待办事项、删除待办事项、编辑待办事项和"完成"待办事项。

到目前为止，您可以在这里看到结果：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事件。CCD_ 3然后调用CCD_ 4函数。

这是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');
}

这是有效的，当我附加它时，只有模型已经有了类"show"，所以不会发生淡入。在追加完成后，如何添加类？还是我做得完全错了？

谢谢！

在添加类之前，浏览器可能没有足够的时间将元素实际插入DOM。

我会尝试使用setTimeout，您真的不需要大的值。

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

这实际上是一个已知的技巧，有些人甚至称之为0超时。

相关文章：