Javascript 调用方法一次，但在主干中执行多次

这是我的班级：

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次。。。。当我转到其他视图并返回单击“添加到购物车”按钮时，总是执行

addToCart

方法的+1

---

你知道是什么引起的吗。谢谢

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

首先，我用模块来分隔应用程序。每个模块都是一个选项卡，我将所有模块都保存在应用程序中。因此，当我想使用url更改可见视图时，我使用了一种名为showSection（SECTION\u 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();
});

在我使用的所有路线中，Like always都是一样的。我还保存了一些视图，这些视图在时间上是持久的，只是隐藏的。所以我的方法app.showSection在app中是：

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更改为remove from backbonejs>=1.0，由@TyroneMichael建议，使用您告诉我的信息。我认为问题在于您每次访问url时都在创建视图。我将向您展示我在显示新视图或以前可见的视图时所做的操作

首先，我用模块来分隔应用程序。每个模块都是一个选项卡，我将所有模块都保存在应用程序中。因此，当我想使用url更改可见视图时，我使用了一种名为showSection（SECTION\u 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();
});

在我使用的所有路线中，Like always都是一样的。我还保存了一些视图，这些视图在时间上是持久的，只是隐藏的。所以我的方法app.showSection在app中是：

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更改为remove from backbonejs>=1.0，由@TyroneMichael

建议，请检查您每次回家时是否没有实例化

HomeView

。@Loamhoof:对不起，您在这里是什么意思？单击

，我只需返回到

HomeView

。是否删除该视图？如果不是的话，这是非常有意义的，因为你的事件并没有被解开。在视图之间导航时，请确保调用view.remove（）。这将清理事件并从dom中删除视图。是的，每次返回HomeView时都是一样的，您再次初始化它，并且每次初始化它时都委派事件#addToCart按钮不在HomeView中，对吗？它不在其模板内。如果它在里面，那么你就不会有这个问题。如果你想试试的话。让我看看初始化视图的方式。你用路由器的方法初始化它吗？我避免多次初始化它，将实例保存在我的应用程序的属性中，如果它不存在，请创建它：if（！this.home）{this.home=new HomeView（）；}this.selectedView=this.home；this.selectedView.show（）@ccsakuweb:Here:

app_router.on（'route:home'，function（）{var homeView=new homeView（{}）；homeView.render（）；}）每次回家时，检查您是否没有实例化
HomeView
。@Loamhoof:对不起，您在这里是什么意思？单击
，我只需返回到
HomeView
。是否删除该视图？如果不是的话，这是非常有意义的，因为你的事件并没有被解开。在视图之间导航时，请确保调用view.remove（）。这将清理事件并从dom中删除视图。是的，每次返回HomeView时都是一样的，您再次初始化它，并且每次初始化它时都委派事件#addToCart按钮不在HomeView中，对吗？它不在其模板内。如果它在里面，那么你就不会有这个问题。如果你想试试的话。让我看看初始化视图的方式。你用路由器的方法初始化它吗？我避免多次初始化它，将实例保存在我的应用程序的属性中，如果它不存在，请创建它：if（！this.home）{this.home=new HomeView（）；}this.selectedView=this.home；this.selectedView.show（）@ccsakuweb:Here:
app_router.on（'route:home'，function（）{var homeView=new homeView（{}）；homeView.render（）；}）
app.currentSection.destroy（）应用程序<代码>来自何处？您需要保存当前正在查看的视图的实例，以隐藏它或在之后销毁它。您可以将home或currentsection保存在包含所有视图的视图中（即app for me，它包含所有视图之间通用的标题），或者如果您不喜欢这样的视图，可以使用window.currentsection。您也可以在窗口或您的批准者中添加showSection。将实例保存到项目中更好的位置嗯。。。这很难理解，也许因为我只是一个新手，主干：/with backbone>=1.0，你可以使用remove而不是destory？它从dom中删除视图并取消绑定事件。@TyroneMichael你说得对，如果我有子视图，我将继承remove并删除每个子视图。将remove now作为视图的方法很好。我实现了在listenTo之前关闭的方法。
app.currentSection.destroy（）
app
来自哪里？您需要保存一个v的实例