从主干中的 DOM 中删除视图

Removing view from DOM in backbone

本文关键字：删除 视图 DOM      更新时间：2023-09-26

我搜索并找到了一些如何从DOM中删除视图的线索，例如Zombie RUN！和其他帖子。之后，我选择了其中一个来做链接。

这是我的观点：

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();
 });

但是视图仍然留在我的 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();
 });

现在，您应该会看到页面上的元素。当您单击它们时，应将其删除。

相关文章：