1

私が直面している問題を説明する前に、これは私が使用しているコードです:

<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
        <script type="text/template" id="view_template">
            <li>
            <label class="lbl" style="width:100px;display:inline-block;"><%= name %></label>
            <button class="btn">Click</button>
            </li>
        </script>
        <script type="text/javascript">
            AppModel = Backbone.Model.extend({
                defaults : {
                    m_name : "Default name"
                },
                modify : function(value) {
                    this.set({
                        m_name : value
                    });
                }
            });

            $(document).ready(function() {
                $("#add").click(function() {
                    var appModel = new AppModel();
                    appModel.modify($("#txt").val());
                    new CustomView({
                        model : appModel
                    });
                    $("#txt").val("");
                });
                CustomView = Backbone.View.extend({
                    el : $(".list"),
                    events : {
                        "click .btn" : "showAlert"
                    },
                    initialize : function() {
                        this.render();
                    },
                    render : function() {
                        var variables = {
                            name : this.model.get("m_name")
                        };
                        var t = _.template($("#view_template").html(), variables);
                        $(this.el).append(t);
                    },
                    showAlert : function() {
                        alert(this.model.get("m_name"));
                    }
                });
            });

        </script>
    </head>
    <body>
        <input type="text" id="txt"/>
        <button id="add">
            Add
        </button>
        <ul class="list" style="list-style: none"></ul>
    </body>
</html>

デモはこちら - http://jsfiddle.net/jCekv/

テキストフィールドに任意の値を入力し、[追加] をクリックします。テキストは、バックボーン ビューであるリストに追加されます。リストに複数の値を追加し続けることができます。いくつかのアイテムを追加した後、いずれかの [クリック] ボタンをクリックします。リスト内のアイテム。そのビューのモデルで値を取得したいのですが、追加する方法が原因でEvents、イベントハンドラーが複数回実行されます。たとえば、3つのアイテムを追加していずれかのボタンをクリックした場合リストには、追加された各項目に対応する 3 つのアラートが表示されます。これは私が望む方法ではありません。アクセスできるように、クリックされたバックボーン ビューに対してのみイベントをトリガーしたいと考えています。クリックしたバックボーン ビューのモデル。

この機能を実現するにはどうすればよいですか?.質問が明確でない場合はお知らせください.よろしくお願いします.

4

2 に答える 2

2

問題は、すべてのCustomViews要素が に設定されていること$(".list")です。したがって、すべてのデリゲート イベントは、個々のリスト項目ではなく、同じ DOM 要素であるリストに追加されます。

ここで考えられる解決策を参照してください: http://jsfiddle.net/mbuchetics/R8jPA/

要素を設定する代わりに ofをCustomView使用するように変更しました。テンプレートは要素に追加されませんが、代わりにそのコンテンツが設定されます。このように、それぞれがリストの 1 つの項目を表し、クリック イベントはまさにその項目を参照します。また、レンダリング呼び出しを初期化から削除しました。代わりに、リストに追加されたときにビューがレンダリングされます (「クリックの追加」コールバックで)。 を返すため、リスト項目の html を取得するために使用できます。tagNameliCustomViewRender()thisview.render().el

コレクションとコレクションの別のビューを使用するように、アプリケーションをさらに改善できます。コレクション ビューは、コレクションに対する「追加」などのイベントを処理し、それに応じてそれ自体 (および個々のアイテム ビュー) を更新できます。

于 2012-05-07T13:04:59.133 に答える
1

これは、アイテムごとにビュークラスの新しいインスタンスを作成し、各インスタンスに同じDOM要素（個々のアイテムではなくリスト全体に対応する）を割り当て、同じイベントリスナーを登録するためです。したがって、いずれかのボタンをクリックするたびに、イベントリスナーがビューオブジェクトごとに起動します。

このようなものが機能します：

http://jsfiddle.net/jCekv/1/

$( document ).ready( function () {

  $( "#add" ).click( function () {

    var appModel = new AppModel();

    appModel.modify( $( "#txt" ).val() );

    var item = new Item_View( {

      model : appModel

    } );

    list.add_item( item );

    $( "#txt" ).val( "" );

  } );


  var List_View = Backbone.View.extend( {

    el : $( ".list" ),

    events : {

      "click .btn" : "showAlert"

    },

    initialize : function () {

      this.render();

    },

    add_item : function ( item ) {

      item.render();

      item.$el.data( 'view_object', item );

      this.$el.append( item.el );

    },

    showAlert : function ( event ) {

      alert(

        $( event.target )

          .closest( 'li' )

          .data( 'view_object' )

          .model.get( "m_name" )

      );

    }

  } );


  var Item_View = Backbone.View.extend( {

    tagName : 'li',

    render : function() {

      var variables = {

        name : this.model.get( "m_name" )

      };

      var t = _.template( $( "#view_template" ).html(), variables );

      this.$el.html( $( t ).html() );

      return this;

    }

  } );


  var list = new List_View;

} );

  • リストとアイテムに別々のビュークラスを作成しました。

  • を使用して各アイテムのビューオブジェクトへの参照を格納しているjQuery.dataので、ビューオブジェクト（およびそれを介してモデルオブジェクト）をイベントリスナー（showAlert）内で取得できます。または、リストビューでアイテムのビューオブジェクトの配列を維持することもできます。リストビューのメソッドを介してアイテムを追加するためのこの設定はすでにあるので、このadd_itemようなアイテムビューオブジェクトの配列の維持が容易になります。

于 2012-05-07T12:52:45.257 に答える