1

这是我的课：

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函数：HomeaddToCart

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 次....addToCart当我转到另一个视图并返回单击添加到购物车按钮时，方法执行总是 +1。

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

4

1 回答 1

1

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

第一件事是我的应用程序由模块分隔。每个模块都是一个选项卡，我将所有模块都保存在 app.js 中。因此，当我想使用 url 更改可见视图时，我使用了一种名为 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 的所有路线中，总是一样。而且我还保存了一些在时间上持续存在并且只是隐藏的视图。所以我在应用程序中的方法 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();
}

我希望它有所帮助。销毁是您告诉的（销毁或删除 Backbone.js 中的视图）。但是我在我的项目中使用了一种接近的方法，这是我从http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/得到的一个想法

我希望我帮助了你

编辑：我将销毁更改为从主干js> = 1.0中删除由@TyroneMichael建议

于 2013-10-26T10:17:56.537 回答