[英]How to bind dynamic element to even from view using backbone.js
我是使用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();
});
}});
我的問題是事件未綁定到模型。 而且我沒有看到警報消息。
好吧,這在這里的主干中有記錄: http : //documentcloud.github.com/backbone/#View-delegateEvents
在您的View擴展中提供一個事件參數:
events : {
"click input.BtnValidate" : "validate",
"click img.ImgDelete" : "delete"
}, ...
在視圖上將validate和delete定義為功能,您便已設置好。 在主干示例中有很多示例。 Backbone使用jQuery委托將事件正確委托給視圖。 增加的好處是,委托的工作方式與實時委托幾乎相同,因此您可以根據需要動態地添加和刪除元素(實時委托實際上是主體上的委托)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.