6

バックボーンjsを使用して切り替えビューを作成しようとしていますが、ビューを数回切り替えたときに、バインドイベントが複数回発生することがわかりました。

以下は、より良い説明のためのコードです。

html

<div id='container'>
    halo world
</div>

<button id='but1'>red view</button>
<button id='but2'>blue view</button>

css

#red_view{
    width:400px;
    height:400px;
    background-color:red;        
}
#blue_view{
    width:400px;
    height:400px;
    background-color:blue;        
}
.button,.button2{
    width:300px;
    height:300px;
    background-color:gray;
}

javascript

RedView = Backbone.View.extend({
    el: "#container",
    events:{"click .button":"clickme"},
    clickme:function(){
        alert('redview');                        
    },
    initialize: function(){
        this.$el.html("<div id='red_view'><div class='button'>Click Me</div></div>");            
    }
});

BlueView = Backbone.View.extend({
    el: "#container",
    events:{"click .button2":"clickme2"},
    clickme2:function(){
        alert('blueview');                        
    },    
    initialize: function(){
        this.$el.html("<div id='blue_view'><div class='button2'>Click Me</div></div>");            
    }
});

$(document).ready(function(){
    //var router = new SystemRouter();

    $('#but1').click(function(){
       var view = new RedView();
    });
    $('#but2').click(function(){
       var view = new BlueView();
    });    
});

赤いビューを3回クリックし、[クリックしてください]を押した場合。3回もアラートがポップアップ表示されます。イベントのバインドをどこかで解除する必要があると思いますが、適切な方法を見つけることができませんでした。これを正しく行うためのいくつかの参照を提供するのが最善です。

jsfiddleデモへのリンクは次のとおりです。http://jsfiddle.net/mochatony/DwRRk/31/

4

3 に答える 3

13

red viewまたはボタンをクリックするたびに、毎回新しい赤または青blue viewのビューが作成されます。それらのイベントハッシュをバインドして、クラスとのボタンから発生するクリックDOMイベントに応答します。buttonbutton2

  1. 「redview」を3回押します->作成されたRedViewの3つのインスタンス
  2. クラス'ボタン'->DOMイベントでボタンをクリックします
  3. 上記のDOMイベントをリッスンしているRedViewの3つのインスタンス->3つのアラート

これは、新しいビューを作成する前にビューをクリーンアップしないため、イベントが表示されなくてもイベントに応答するゴーストビューが効果的に残るためです。（イベントハッシュの詳細）このようなものを使用して、ビューからイベントをクリーンアップできます。

cleanup: function() {
  this.undelegateEvents();
  $(this.el).clear();
}

これが、ビューのクリーンアップ作業のフィドルですhttp://jsfiddle.net/DwRRk/34/

また、グッドプラクティスのヒント：レンダリングメソッドのようなものを使用してDOMにコンテンツをアタッチし、initializeを使用してビューに必要な値を初期化する必要があります。

于 2012-06-26T07:58:31.657 に答える
2

ボタンがクリックされるたびに、前のビューを破棄することなく、新しいビューを作成しています。次のような単一のビューを使用してみてください。

http://jsfiddle.net/DwRRk/32/

var SomeModel = Backbone.Model.extend({});

var SomeView = Backbone.View.extend({
    el: "#container",
    model: SomeModel,
    events: {
        "click .button": "clickme"
    },
    clickme: function() {
        alert(this.model.get("color"));
    },
    colorChanged: function() {
        this.$el.html("<div id='" + this.model.get("color") + "_view'><div class='button'>Click Me</div></div>");
    },

    initialize: function() {
        _.bindAll( this, "colorChanged" );
        this.model.on("change:color", this.colorChanged );
        this.model.on("reset", this.colorChanged );
    }
});



$(document).ready(function() {
    //var router = new SystemRouter();
    var model = new SomeModel({color: "red"}),
        view = new SomeView({model: model})


    $('#but1').click(function() {
        model.set("color", "red");
    });
    $('#but2').click(function() {
        model.set("color", "blue");
    });
});​
于 2012-06-26T07:50:29.180 に答える
2

ゴーストビューを削除する別の方法があります（私が使用しているもの）

disposeView: function(view){
   Backbone.View.prototype.close = function () {
      this.unbind();
      this.undelegateEvents();
   };

   /* --Destroy current view */
   if(this.currentView !== undefined) {
      this.currentView.close();
   }

   /* --Create new view */
   this.currentView = view;
   this.currentView.delegateEvents();

   return this.currentView;
}

disposeView(new view());

ビューでは常に「this」を返すようにしてください。そうしないと、これは機能しません。

于 2013-02-19T02:06:47.820 に答える