Question

我的班级：

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视图中调用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;
});

但是当我点击其他视图，然后返回Home视图，再次点击addToCart按钮时，该项目增加了2倍（addToCart方法执行两次）。如果我继续查看另一个视图并再次单击该按钮，则addToCart方法执行3次....当我转到其他视图并返回单击添加时，始终执行+1 addToCart方法购物车按钮。

知道可能导致这种情况的原因。谢谢。

Answer 1

根据您告诉我的信息，我认为问题在于您每次访问网址时都在创建视图。当我要显示以前可见的新视图或视图时，我将向您展示我的工作。

首先，我将应用程序与模块分开。每个模块都是一个选项卡，我在应用程序中保存了所有模块。因此，当我想使用url更改可见视图时，我使用了一个名为showSection（SECTION_NAME）的app方法

但在你的情况下，你需要进行下一次修改：

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的所有路线中，总是一样的。而且我也保存了一些在时间上持久且只隐藏的观点。所以我在app中的方法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是你告诉的那个（Destroy or remove a view in Backbone.js）。但我在我的项目中使用了一个密切的方法，我从http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

得到了一个想法

我希望我能帮到你

编辑：我更改了destroy以从backbonejs中移除＆gt; = 1.0建议@TyroneMichael

调用方法一次，但在骨干中执行了很多次

1 个答案: