如何使用骨干网将动态元素绑定到甚至从视图

Question

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

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

                            });

}});

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

Answer 1

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

在您的View扩展中提供一个事件参数：

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

在视图上将validate和delete定义为功能，您便已设置好。 在主干示例中有很多示例。 Backbone使用jQuery委托将事件正确委托给视图。 增加的好处是，委托的工作方式与实时委托几乎相同，因此您可以根据需要动态地添加和删除元素（实时委托实际上是主体上的委托）。