再帰的なBackbone.jsビューで複数の起動を防ぐ方法はありますか？

Question

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

<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 
    } 
}); 

HTML問題私は子要素をクリックした場合、両方のビューがedit_elementイベントを、発火するということですいくつかの理由で問題がある。子の中のリンクをクリックすると、<li>の<li>が発生し、それを含む<li>は発生しません。あなたがstopPropagationを用いて通常の方法で伝播を止めることができるように

Answer 1

バックボーンのイベントハンドラは、単なる古いjQueryのイベントハンドラを以下のとおりです。

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/

Answer 2

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

1. より具体的なセレクターを使用してください。この特定のケースでは、click .edit-element:firstはおそらく、子リストの編集ボタンの前に編集ボタンがあるので、このトリックを行うでしょう。
2. バックボーンeventsコレクションを使用する代わりに、興味のある要素に直接バインドします。したがって、子リストをレンダリングする前に、this.$(".edit-element").click(_.bind(myClickHandler, this))のような操作を行います。
3. ハンドラ関数内にコードを挿入して、どの要素がクリックされたかを調べ、それが興味のあるものかどうかを確認します。このコードはちょっと気になるものですが、これは特に良いとは思いませんソリューション、サンプルコードはありません。 :)