如何使用backbone.js将动态元素绑定到视图答案

【问题标题】：How to bind dynamic element to even from view using backbone.js如何使用backbone.js将动态元素绑定到视图
【发布时间】：2011-05-09 08:15:06
【问题描述】：

我是使用backbone.js 和jquery 的新手。我喜欢将动态生成的元素绑定到视图中的单击事件。这是我的代码：

InvoiceView = Backbone.View.extend({
initialize: function () {
    var _this = this;

         $('input.BtnValidate').bind('click', function () {
        _this.model.save();
        _this.model.createTable();
        _this.model.updateTotalAmount();
        _this.model.clear();
    });

    $('img.ImgDelete').bind('click', function () {            
        _this.model.RemoveTableRow();
        _this.model.updateTotalAmount();
    });  

}});

其中img.ImdDelete是表格单元格的动态生成数据。

模型中的代码是：

InvoiceModel = Backbone.Model.extend({
createTable: function () {
    var lastRow = $('#TblInvoiceList tr:last');
    var newRow = $('<tr>');
    newRow.append($('<td>').text($('input.Name').val()), $('<td>').text($('input.GrossAmount').val()));
    newRow.append("<td class='center'><img class='ImgDelete' src='image/ButtonDelete.png' /></td>");
    lastRow.before(newRow);
    $("tr:nth-child(even)").addClass("white");
    lastRow.addClass("tr.last");
        },

RemoveTableRow: function () {
    alert("delete the row");
             var deletedRow = $('#TestTable td img.ImgDelete');
            S(deletedRow).parent().parent().remove();

                            });

}});

我的问题是事件未绑定到模型。而且我没有看到警报消息。

【问题讨论】：

标签： javascript jquery viewmodel backbone.js

【解决方案1】：

这在主干中有记录： http://documentcloud.github.com/backbone/#View-delegateEvents

在你的视图中扩展提供一个事件参数：

events : {
  "click input.BtnValidate" : "validate",
  "click img.ImgDelete" : "delete"
}, ...

将 validate 和 delete 定义为视图上的函数，然后就可以设置了。在主干示例中有很多这样的示例。 Backbone 使用 jQuery 委托将事件正确地委托给视图。额外的好处是，delegate 的工作方式与 live 几乎相同，因此您可以随意添加和删除元素（live 几乎是 body 上的代理）。

【讨论】：