knockout.js - knockout custom bindinghandler and custom jquery UI widget -

i'm trying create custom knockout bindinghandler add custom jquery ui widget have run trouble trying access elements created during binding. i'm sure there's fundamental i'm missing. have following 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> 

and following 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); 

when widget created, needs find each th element created binding. however, elements don't appear created @ point in time. have tried both init , update methods of bindinghandler.

this works if manually add widget element, not within bindinghandler.

when , how access elements created data-binding jquery widget can modify them?

you need take control of bindings descendant elements within custom binding handler.

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

but basically, like:

ko.bindinghandlers.mygrid = {     init: function (element, valueaccessor, allbindingsaccessor, viewmodel, bindingcontext) {          // bind our child elements (which create virtual foreach elements)         ko.applybindingstodescendants(bindingcontext, element);            // make grid widget         $(element).grid();                    // tell ko have bound children         return { controlsdescendantbindings: true };     },     update: function() { ... } };