0

バックボーンに作成されたビュー (リスト コンテナー) があり、いくつかのイベントを処理する複数のビュー アイテム (セクション) を含める必要があります。このシナリオの問題は、サブビュー アイテムがコンテナー内に配置されるたびにイベントが実行されることです。

closeSection メソッドを Container ビューに配置すれば、この影響を防ぐことができることはわかっていますが、完全な作業ビューに焦点を当てた場所は間違っていると思います。

Backbone.js コンテキストでこの問題を解決するための最良の解決策は何ですか?

例：

// The Container View (simplified)
var Container = Backbone.View.extend({
  el:$('#someDivContainer'),

  render:function(){
    $(this.el).html('<div id="head"></div><div id="sections"></div>');
    return this;
  }
});


// The subview (simplified)
var subView = backbone.View.extend({
  template:_template('<div><div class="scthd"><a class="op_cl">x</a></div><div><%- content %></div></div>');
  events:{
    'click a.op_cl':'closeSection'
  },

  initialize:function(){
    this.setElement($('#sections');
  },

  closeSection:function(event){
    event.preventDefault();
    console.log('event was triggered');
  },


  render:function(){
     $(this.el).append(this.template({content:'Test ' + i});
     return this;
  }
}); 

var oContainer = new Container();
    oContainer.render().el;


 // These produces a ten time event execution by a click on one a.op_cl item
 for(var i=0; i<10; i+=1){
   var oSubView = new subView();
       oSubView.render().el;
 }

「最終」出力は次の例のようになります。

<!-- The HTMl of the first view -->
<div id="head"></div>
<div id="sections">
  <div>
    <div class="scthd">
      <a class="op_cl">x</a>
    </div>
    <div>Test 0</div>
  </div>

  <div>
    <div class="scthd">
      <a class="op_cl">x</a>
    </div>
    <div>Test 1</div>
  </div>

  <div>
    <div class="scthd">
      <a class="op_cl">x</a>
    </div>
    <div>Test 2</div>
  </div>

  <div>
    <div class="scthd">
      <a class="op_cl">x</a>
    </div>
    <div>Test n</div>
  </div>
</div>

事前にTHX。

4

2 に答える 2

0

問題が何であるかを理解するには、backbone.js でイベント ハッシュを宣言すると、それらのイベントがelビューのルートに委譲されることを最初に理解する必要があります。あなたの場合、すべてのサブビューが同じ#sections要素を使用しているため、イベントが同じ要素にバインドされています。

それらを同じ要素に設定している理由がわからないので、何をしようとしているかに応じて、をthis.setElement($('#sections'));省略してコンテナビューにサブビューを追加するか、他の方法を使用してサブビューを追加することができますビュー。コンテナ ビューにイベントを伝える限り、コンテナ ビューでイベントを宣言するだけです。

于 2013-07-30T13:24:10.093 に答える
0

ビューを設定する方法は、(少なくともバックボーンの土地では) 概念的に間違っています。ここでの主なエラーは、すべてのサブビューが単一の共通ルート要素を共有していることです。これは本当に悪い行です:

initialize: function() {
    this.setElement($('#sections'));
}

責任を逆に割り当てているため、これは概念的に間違っています。必要なすべてのサブビューでそれ自体を構築するルート ビューを持つ代わりにSidebar、サブビュー自体をSidebar.

ジャックが答えで正しく言ったように、これにはイベント処理に関する問題もあります。次のようなことを言うと:

events: {
    'click a.op_cl': 'closeSection'
}

シングルクリックイベントリスナーをビューのルート要素にアタッチしています。これは、起動時にターゲットがセレクターと一致するかどうかを最初に確認し、一致する場合はコールバックを実行します。この場合、同じ要素 ( #section) に 10 個のイベント リスナーをアタッチしており、リンクをクリックすると、それぞれが一致して起動します。

サブビューを次のように変更する必要があります

var SubView = Backbone.View.extend({

    tagName: 'li',

    template: _template('<div class="scthd"><a class="op_cl">x</a></div><div><%- content %></div>'),

    events: {
        'click a.op_cl': 'closeSection'
    },

    closeSection: function(event) {
        console.log('event was triggered');
    },

    render: function() {
        $(this.el).append(this.template({content:'Test ' + i});
        return this;
    }

});

そして、それらのSubViewインスタンスを から にSidebarアタッチしますSidebar。

于 2013-07-30T14:21:27.123 に答える