我搜索并找到了一些如何从 DOM 中删除 View 的线索,例如 Zombie RUN!和其他人发帖。之后我选择了其中之一来做here the link .
这是我的观点:
var HomeView = Backbone.View.extend({
initialize: function() {
myCart1.updateQtyLabel("qtyCart");
window.localStorage.setItem("User",serializeObjToJSON(customer));
},
el: '#webbodycontainer',
events : {
"click #addToCart" : function(){
myCart1.addToCart(newItem);
myCart1.updateQtyLabel("qtyCart");
$("#containernewpromotion").html(promotionItem);
}
},
render : function(){
this.$el.html(homePanel);
$("#containernewpromotion").html(promotionItem);
},
remove: function() {
this.undelegateEvents();
this.$el.empty();
this.stopListening();
return this;
}
});
return HomeView;
这是我的路由器:
app_router.on('route:home', function( ){
var homeView = new HomeView();
homeView.remove();
homeView = new HomeView();
homeView.render();
});
但是 View 仍然保留在我的 DOM 中。关于这个问题的任何想法请。谢谢。
最佳答案
问题出在这里:
app_router.on('route:home', function( ){
var homeView = new HomeView();
homeView.remove();
homeView = new HomeView();
homeView.render();
});
在第 3 行中,您正在调用 remove()
方法。在第 4 行中,您再次实例化它,在第 5 行中,您将插入到 DOM 中。
您必须在render
之后调用remove
。但是,如果您立即调用remove,您可能在 DOM 中看不到任何内容。下面是单击元素时从 DOM 中删除元素的示例
var HomeView = Backbone.View.extend({
.....
events : {
"click #addToCart" : function(){
myCart1.addToCart(newItem);
myCart1.updateQtyLabel("qtyCart");
$("#containernewpromotion").html(promotionItem);
},
'click': 'remove'
},
......
});
现在,您可以按如下方式渲染它:
app_router.on('route:home', function( ){
var homeView = new HomeView();
homeView.render();
});
您现在应该可以看到页面上的元素。当您单击它们时,它们应该被删除。
关于javascript - 从主干中的 DOM 中删除 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19616832/