调用方法一次，但在执行骨干多次 [英] Calling method once but it executed many times in backbone

问题描述

下面我的类：

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 在首页功能，当我点击 addToCart 视图code>按钮：

Then I call addToCart function in Home view when I click on addToCart button:

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

再次但是，当我点击了另一种观点，然后再返回到首页视图，然后单击 addToCart 按钮，该项目增加2倍（ addToCart 方法执行两个时间）。如果我继续另外的看法，再次点击按钮， addToCart 方法执行3次.... addToCart 方法在执行时，我去其他视图，回来单击添加到购物车按钮。

But when I click to the other view, then back to Home view, and click addToCart button again, the item is increasing 2 times (addToCart method executes two time). If I continue to another view and click on the button again , addToCart method executes 3 times.... Always +1 of addToCart method executing when I go to other view and come back to click on add to cart button.

任何想法，这可能是造成这一点。谢谢。

Any idea what could be causing this. Thanks.

推荐答案

通过你告诉我，我觉得现在的问题是，你正在创建每次访问URL时的视图中的信息。我要告诉你我做什么，当我要展示一个新的观点，或者是以前看到的景色。

With the information that you told me I think that the problem is that you are creating the view each time you visit the url. I am going to show you what I do when I am going to show a new view or a view that was visible before.

的第一件事是，我通过模块分离的应用程序。每个模块是一个标签，我必须保存在应用程序中的所有模块。所以，当我想用​​我使用的应用程序名为showSection（SECTION_NAME）方法的URL来改变可见视图

The first thing is that I have the application separated by modules. Each module is a tab and I have all the modules saved in app. So when I want to change the visible view using the url I use a method of app called showSection(SECTION_NAME)

但你的情况，你需要在下一个修改

But in your case you will need the next modification:

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：

Like always is the same in all the routes I use that showSection. And also I have saved some views that are persistent in the time and only hided. So my method app.showSection in app is:

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

我希望它能帮助。毁灭是你告诉一个（<一个href=\"http://stackoverflow.com/questions/6569704/destroy-or-remove-a-view-in-backbone-js/11534056#11534056\">Destroy或删除Backbone.js的视图）。但是我用了密切的方法在我的项目的想法，我从拿到<一个href=\"http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/\" rel=\"nofollow\">http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

I hope it helps. Destroy is the one you told (Destroy or remove a view in Backbone.js). But I use a close method in my project an idea I got from http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

我希望我帮你。

编辑：我改变摧毁从backbonejs删除> = 1.0 @TyroneMichael建议

I changed destroy for remove from backbonejs >= 1.0 Suggested by @TyroneMichael

这篇关于调用方法一次，但在执行骨干多次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！