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メソッドは2回実行されます)。別のビューに移動してボタンをもう一度クリックすると、メソッドが 3 回実行されます。他のビューに移動して戻ってきて [カートに追加] ボタンをクリックすると、実行中addToCartのメソッドが常に +1 になります。addToCart

これを引き起こしている可能性のある考え。ありがとう。

4

1 に答える 1

1

あなたが私に言った情報では、問題は、URLにアクセスするたびにビューを作成していることだと思います. 新しいビューまたは以前に表示されていたビューを表示するときに何をするかを示します。

最初に、モジュールごとにアプリケーションを分離しました。各モジュールはタブであり、すべてのモジュールがアプリに保存されています。したがって、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();
}

お役に立てば幸いです。Destroy はあなたが言ったものです ( Backbone.js のビューを破棄または削除します)。しかし、私は自分のプロジェクトで閉じる方法を使用していますhttp://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

私はあなたを助けたことを願っています

編集: backbonejs >= 1.0 から削除するために destroy を変更しました @TyroneMichael によって提案されました

于 2013-10-26T10:17:56.537 に答える