关于我的待办事项应用程序的另一个问题再次返回。
目前开发进展顺利。现在可以添加待办事项、删除待办事项、编辑待办事项和“完成”待办事项。
到目前为止,您可以在这里看到结果: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');
}
这是有效的,只有模型在我附加它时已经有类“显示”,所以不会发生淡入。追加完成后如何添加类?还是我完全错了?
谢谢!
最佳答案
也许浏览器没有足够的时间在添加类之前将元素实际插入到 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 .
关于javascript - 如何在 Backbone.js 中追加后添加类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33372393/