2011-05-09 28 views
1

我是新使用backbone.js和jquery。 我喜歡綁定一個動態生成的元素來點擊視圖中的事件。 hier是我的代碼:如何綁定動態元素甚至從視圖使用backbone.js

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

          }); 

}}); 

我的問題是事件不會綁定到模型。我沒有看到提醒消息。

回答

1

嗯,這是記錄在這裏骨幹: http://documentcloud.github.com/backbone/#View-delegateEvents

在您查看擴展提供了事件的說法:

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

定義驗證並刪除作爲您的視圖功能,你都設置。骨幹例子中有很多例子。 Backbone使用jQuery委託來正確地將事件委託給視圖。額外的好處是,代理的工作方式與現場幾乎相同,因此您可以隨意添加和刪除元素(實際上幾乎是代表身體的代表)。

相關問題