1

こんにちは、私はバックボーンを学んでおり、イベントをビューにバインドするのに問題があります。私の問題は、呼び出されたときにすべてのビューを 1 つのビューの一部にすぎないボタン プレス イベントにバインドするビュー コンストラクターがあることです。ボタンを含む 1 つのビューのみにボタン プレス イベントをバインドしたいと思います。

http://jsbin.com/tunazatu/6/edit?js,console,output

  1. すべての表示ボタンをクリックします
  2. 次にクリックして戻る 1
  3. 赤いボタンをクリックします (すべてのビューのモデル console.log その名前)

だから私はこの複数のイベントの発火からのコードを見てきました。これは、tagName を介して同じ el を持つ複数のビューを持つことができるが、イベントをそれらの html 要素にのみマップできることを示しています。これは、Jérôme Gravel-Niquet の localtodos の例でも行われています。

el /tunazatu/7/edit?js,console,output を宣言しないことも試みましたが、イベントがバインドされないようです。 


    var AppView = Backbone.View.extend({
    tagName:"div",  //tagName defined
    getName:function(){
      console.log(this.model.get('name'));
    },
    initialize:function(options){
      this.listenTo(this.model, 'change', this.render);
      var temp_mapper = {appView1:'#route1',appView2:'#route2',appView3:'#route3'};
      var m_name = this.model.get('name');
      this.template = _.template($(temp_mapper[m_name]).html());  //choose the correct template
    },
    render:function(){
      var temp = this.template(this.model.toJSON()); //populate the template with model data
      var newElement = this.$el.html(temp);  //put it in the view's tagName
      $('#content').html(newElement);
    },
    events:{
      "click button":"log"
    },
    log:function(){
      this.getName();
    }
  });
4

1 に答える 1

1

あなたの問題は、あなたAppViewが本当にこのように見えることです:

var AppView = Backbone.View.extend({
    el: "#content",
    //...

新しい を作成するたびにAppView、別のイベント委任者をバインドし#contentますが、それらの委任を削除することはありません。3 つの を作成すると、最終的に 3 つのビューがinsideAppViewをリッスンします。click button#content

次の 2 点をお勧めします。

  1. ビューを再利用しようとするのは避け、必要に応じて ( 経由でView#remove) ビューを作成および破棄します。ビューは、それらをまとめて分解するのが安価であるように、十分に軽量でなければなりません。
  2. 複数のビューを同じ にバインドしないでくださいel。代わりに、各ビューに独自のビューを作成elさせ、呼び出し元がそれをコンテナーel 内に配置できるようにします。

これらの両方を行うと、問題はなくなります。あなたAppViewは次のようになります：

var AppView = Backbone.View.extend({
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this; // Common practise, you'll see why shortly.
  },
  // As you already have things...
});

次に、ルーターのメソッドは次のようになります。

view1: function() {
  if(this.appView)
      this.appView.remove();
  this.appView = this.createView('appView1');
  $('#content').html(this.appView.render().el);
  // that `return this` is handy ----------^^
},

現在のアプローチに固執する必要がある場合は、別のアプローチをレンダリングする前に現在のアプローチを呼び出しundelegateEvents、レンダリング後に新しいアプローチを呼び出す必要があります。AppViewdelegateEventsAppView

しかし実際には、現時点で必要のないビューを破棄することを恐れないでください。ページ上で現在必要のないビューを破棄し、必要なときに新しいインスタンスを作成してください。ビューを破棄したくない場合もありますが、通常は回避できます。

于 2014-05-20T05:05:57.567 に答える