1

バックボーンで管理しようとしているネストされたリストを持つアプリケーションがあります。個々の<li>要素ごとにビューがありますが、各リスト要素には独自のネストされた<ul>タグがあり、インスタンス化された独自のビューがあります。以下に例を示します。

HTML

<ul class='elements'>
  <li class='element'>
     <div>
       <a class='edit-element'>Edit</a>
     </div>
     <ul class='elements'>
       <li class='element'>
         <div>
           <a class='edit-element'>Edit</a>
         </div>
       </li>
     </ul>
   </li>
</ul>

JavaScript

element_view = Backbone.view.extend({
  events: {
    'click .edit-element' : 'edit_element'
  },
  edit_element : function(event) {
    //code to handle editing of an element
  } 
});

問題は、子要素をクリックすると、両方のビューで edit_element イベントが発生することです。これにはいくつかの理由で問題があります。child のリンクをクリックしたときに、それを含む sではなく、<li>その に対して起動するようにするにはどうすればよいですか?<li><li>

4

2 に答える 2

4

バックボーンのイベントハンドラーは単なる古いjQueryイベントハンドラーであるため、次を使用して通常の方法で伝播を停止できますstopPropagation。

edit_element: function(event) {
    event.stopPropagation()
    //...
}

デモ： http： //jsfiddle.net/ambiguous/Yb8rg/1/

または戻ることによってfalse：

edit_element: function(event) {
    //...
    return false;
}

デモ： http： //jsfiddle.net/ambiguous/QvaGM/1/

于 2012-05-09T19:39:14.113 に答える
1

すでに「mu が短すぎる」と述べたことに加えて、これを解決するには 3 つの方法が考えられます。私の個人的な好みの順序で：

  1. より具体的なセレクターを使用してください。この特定のケースでclick .edit-element:firstは、編集ボタンが子リストの編集ボタンの前にあるため、おそらくうまくいくでしょう。
  2. Backbone コレクションを使用する代わりに、events関心のある要素に直接バインドします。したがって、子リストをレンダリングする前に、次のようなことを行いますthis.$(".edit-element").click(_.bind(myClickHandler, this))。
  3. ハンドラー関数内にコードを挿入して、どの要素がクリックされたかを確認し、それが目的の要素であるかどうかを確認します。このためのコードは少し手間がかかりますが、これは特に良い解決策ではないと思います。サンプルコードはありません。:)
于 2012-05-10T02:13:39.580 に答える