Question

我有一个视图，它在使用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");
            }
        })

现在，当我点击一行上的删除时，它会触发所有行的事件，并且我会获得与行数一样多的警报。我明白问题是什么。因为我把el作为整个表，所以它会在所有行中附加事件。有什么办法可以解决这个问题？我需要使用数据表。对于简单的表格，我应该使用el作为'tr'，但实际上不知道如何实现我当前的愿望。

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

希望这有助于某人。

事件附加到主干中的表（数据表）视图中的所有行

1 个答案: