我的问题是我第一次加载页面并且视图正确显示。show 函数执行动画,但是当我导航到不同的视图并返回时,它没有动画但仍然显示。在路由器中,我为导航到的每个页面创建一个新视图。
我将集合保存到一个名为的全局应用程序以限制加载。当我每次重新创建集合时,显示动画都会起作用,这让我认为它在渲染方法中有所体现。我认为这可能与 jquery 缓存了旧元素这一事实有关,当我再次将模板添加到页面时,选择器正在寻找旧元素而不是新元素。
我的页面视图代码如下。就像我说它第一次正常工作,但第二次动画没有发生。
initialize: function() {
if(!app.collections.boardsList)
app.collections.boardsList = new app.BoardsListCollection();
this.listenTo(app.collections.boardsList, "add", this.renderOne);
this.listenTo(app.collections.boardsList, "reset", this.render);
this.listenTo(app.collections.boardsList, "change", this.render);
this.render();
app.collections.boardsList.fetch();
this.interval = setInterval(function(){
app.collections.boardsList.fetch();
console.log("Fetching");
}, 10000);
},
render : function(){
this.$el.html(this.template());
this.renderAll();
return this;
},
renderAll : function(){
app.collections.boardsList.each(this.renderOne, this);
},
renderOne : function(item){
var container = !this.state ? "#left-list" : "#right-list";
var boardView = new app.BoardsItemView({
model : item
});
boardView.$el.hide();
boardView.render();
this.$el.find(container).append(boardView.$el);
boardView.$el.show("fast");
this.state = this.state ? 0 : 1;
}