淘汰賽自定義綁定處理程序和自定義jQuery UI部件

Question

我想創建一個自定義淘汰賽bindingHandler來添加自定義jQuery UI部件，但遇到麻煩試圖訪問綁定過程中創建的元素。我確信這是我失蹤的根本原因。我有以下的html：

<table data-bind="myGrid: {}"> 
     <thead> 
      <tr data-bind="foreach: { data: columns, as: 'column' }"> 
       <th data-bind="text: column"></th> 
      </tr> 
     </thead> 
     <tbody data-bind="foreach: { data: rows, as: 'row' }"> 
      <tr data-bind="foreach: { data: $parent.columns, as: 'column' }"> 
       <td data-bind="text: row[column]"></td> 
      </tr> 
     </tbody> 
    </table> 

而且下面的JavaScript：

var vm = { 
    columns: [ 
     'A', 'B' 
    ], 
    rows: [] 
}; 
$.widget("my.grid", { 
    _create: function() { 
     var columns = this.element.find('th'); 
    } 
}); 
ko.bindingHandlers.myGrid = { 
    init: function (element) { 
     //$(element).grid(); 
    }, 
    update: function(element) { 
     $(element).grid(); 
    } 
}; 

ko.applyBindings(vm); 

當創建的小部件，它需要找到各次從綁定創建的元素。但是，這些元素似乎並未在此時創建。我已經嘗試了綁定處理程序的init和update方法。

這個工程，如果我手動添加小部件到元素，只是不在綁定處理程序。

何時以及如何訪問通過數據綁定創建的元素，以便我的jQuery小部件可以修改它們？

Answer 1

您需要控制綁定到您的自定義綁定處理程序中的後代元素。

見http://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html

但基本上，做這樣的事情：

ko.bindingHandlers.myGrid = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 

     // bind our child elements (which will create the virtual foreach elements) 
     ko.applyBindingsToDescendants(bindingContext, element); 

     // make your grid widget 
     $(element).grid();   

     // tell KO we have already bound the children 
     return { controlsDescendantBindings: true }; 
    }, 
    update: function() { ... } 
};