javascript - 调用方法一次，但在主干中执行了多次

Question

这是我的类(class):

function Cart(){
   if (typeof Cart.instance === 'object') {
      return Cart.instance;
   }
   Cart.instance = this;

   //the other method....

   var self = this;
   var items = window.localStorage.getItem(Cart.storageName);
   this.addToCart = function(item){

      if (!(items instanceof Array)) items = [];
      var itemIndex = getItemIndexById(items, item.ID);
      if(typeof(itemIndex) === 'number'){
         items[itemIndex].QuantityInCart++;
      }
      else{
         item.QuantityInCart = 1;
         items.push(item);
      }
      window.localStorage.setItem(Cart.storageName, serializeObjToJSON(items));
   };
}

Cart.storageName = "Cart";

然后，当我单击 addToCart 按钮时，我会在 Home View 中调用 addToCart 函数:

define(["jquery" ,
   "underscore" ,
   "backbone" ,
   "text!templates/Home/homePanel.html",
   "text!templates/Item/itemTemplate.html"
],function($ , _ , Backbone , HomePanel, ItemTemplate){

 var promotionItem = _.template(ItemTemplate);
 var homePanel = _.template(HomePanel);
 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);
   }
});
 return HomeView;
});

但是当我单击另一个 View ，然后返回 Home View ，并再次单击 addToCart 按钮时，该项目增加了 2 倍(addToCart 方法执行两次)。如果我继续到另一个 View 并再次单击按钮，addToCart 方法将执行 3 次....当我转到其他 View 时，执行的 addToCart 方法总是 +1返回点击“添加到购物车”按钮。

知道是什么原因造成的吗？谢谢。

Answer 1

根据您告诉我的信息，我认为问题在于您每次访问该网址时都会创建 View 。我将向您展示当我要显示新 View 或以前可见的 View 时我会做什么。

第一件事是我将应用程序按模块分开。每个模块都是一个选项卡，我将所有模块保存在应用程序中。因此，当我想使用 url 更改可见 View 时，我使用名为 showSection(SECTION_NAME) 的应用程序方法

但在您的情况下，您将需要进行下一个修改:

app_router.on('route:home', function( ){ 
    if(window.currentSection)
        window.currentSection.remove(); //always in your routes destroy the current view
    window.currentSection = new HomeView({}); 
    $("body").append(window.currentSection.$el); 
    window.currentSection.render();
});

就像我使用该 showSection 的所有路线一样。我还保存了一些在时间上持久且只是隐藏的 View 。所以我在应用程序中的方法app.showSection是:

showSection: function (sectionNAME) {
    if(this.currentSection)
        this.currentSection.hide();

    switch(sectionNAME) {
        case "homeNotPersistent":
            if(this.home)
                this.home.remove();
        case "homeNotPersistent":
        case "home": 
            if(!this.home){
               this.home = new HomeView();
               this.$el.append(this.home.$el);
            }
            this.currentSection = this.home;
            break; 
        ...
    }
    this.currentSection.render();
}

希望对您有帮助。摧毁是你告诉的( Destroy or remove a view in Backbone.js )。但我在我的项目中使用了 close 方法，这是我从 http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/ 得到的想法。

希望对你有帮助

编辑:我将 destroy 更改为从backbonejs中删除 >= 1.0 由@TyroneMichael建议