什麼時候應該將事件綁定到Knockout綁定生成的元素上？

我正在使用以下標記（刪節）來顯示錶中的人員對象列表。當單擊一行時，我想打開一個編輯細節彈出窗口，但我的基本事件綁定不適用於通過Knockout數據綁定添加到表中的行。什麼時候應該將事件綁定到Knockout綁定生成的元素上？

<script> 
    function PersonModel(data) { 
     var self = this; 
     self.id = data.Id; 
     self.firstName = data.FirstName; 
    } 
    $(function() { 
     function personListModel() { 
      var self = this; 
      self.persons = ko.observableArray([]); 
      $.getJSON("Person/IndexJson", function (allData) { 
       var mappedPersons = $.map(allData, function (item) { return new PersonModel(item); }); 
       self.persons(mappedPersons); 
      }); 
     } 
     ko.applyBindings(new personListModel()); 
     $(".person-row").click(function() { 
      alert("Hello "); 
     }); 
    }); 
</script> 
<table> 
    <tbody data-bind="foreach: persons"> 
     <tr class="person-row" data-bind="attr: { 'data-id': id }"> 
      <td data-bind="text: firstName"></td> 
      <td data-bind="text: surname"></td> 
      <td data-bind="text: email"></td> 
      <td data-bind="text: cell"></td> 
     </tr> 
    </tbody> 
</table>

如果我綁定在JS控制檯後的頁面呈現和結合的Click事件處理程序，該處理程序被正確調用，但最初的事件在上面的代碼綁定根本不起作用。我必須做什麼來綁定到由淘汰賽產生的行。我認爲只需在ko.applyBindings()之後綁定事件處理程序即可。

來源

2012-10-14 ProfK

您需要使用JQuery的on method認購其上的頁面加載後加在DOM元素事件：

$(".person-row").on("click", function(event){ 
    alert("Hello "); 
});

或者你可以使用click binding結構和基因敲除辦理訂閱：

function personListModel() { 
    var self = this; 
      ... 

    self.personClicked = function(data) { 
     alert("Hello "); 
    } 
}

而在你的看法：

<tr class="person-row" data-bind="attr: { 'data-id': id }, click: $root.personClicked">

你可以在這個fiddle看到它的行動。

來源

2012-10-14 08:50:20 nemesv

你可以添加參數到你的personClicked函數self.personClicked：function（data，event）{}'其中'data'將被點擊'PersonModel'並且'event'將會是click事件參數，更多info請參閱[click binding documentation]（http://knockoutjs.com/documentation/click-binding.html） – nemesv

你是對的，綁定事件的正確語法是'click：$ root.personClicked'我已更新我的答案也創造了一個工作小提琴。 – nemesv

什麼時候應該將事件綁定到Knockout綁定生成的元素上？

回答

相關問題