0

datatable プラグインでレンダリングされたテーブルに新しい行を追加するビューがあります。各行に特定の一連のイベントを添付したいと考えています。ビューは次のとおりです。

var newRow=Backbone.View.extend({

        el:".datatable",


        events:{
            'click .edit':'edit',
            'click .delete':'delete'
            },


            render: function()
            {

                data=this.model.toJSON();
                this.$el.dataTable().fnAddData([data.name,data.email,data.contact_number,'<span style="cursor:pointer" class="delete">Delete</span>']);
                return this;
            },


            edit:function(){
                alert("edit");
            },

            delete:function(){
            alert("delete");
            }
        })

1 つの行で削除をクリックすると、すべての行のイベントがトリガーされ、行と同じ数のアラートが表示されます。私は問題が何であるかを理解しています。テーブル全体として el を使用したため、すべての行にイベントが追加されます。これに対する解決策は何ですか？データテーブルを使用する必要があります。単純なテーブルの場合、el を「tr」として使用する必要がありましたが、現在の欲求を達成する方法が本当にわかりません。

4

1 に答える 1

1

誰かがこのような問題に苦しんでいる場合は、私がしたようにデータテーブルから fnAddTr プラグインを使用してください:

var newrow=Backbone.View.extend({            

       tagName:"tr",

        events:{
            'click .edit':'edit',
            'click .delete':'delete'
            },


            render: function()
            {

            data=this.model.toJSON();

            this.$el.html('<td>'+data.name+'</td><td>'+data.email+'</td><td>'+data.contact_number+'</td><td><span class="delete">Delete</span> | <span class="edit">Edit</span></td>');
            return this;
            },


            edit:function(){
                alert("edit");
            },

            delete:function(){
            alert("delete");
            }
            });

そして、呼び出し元の関数で、次のように tr 要素を追加します。

var Instance=new newRow({ model:myModel});
$('table').dataTable().fnAddTr(Instance.render().el);

この行が鍵です$('table').dataTable().fnAddTr(Instance.render().el);

これが誰かに役立つことを願っています。

于 2013-02-01T11:51:12.047 に答える