knockout custom bindinghandler and custom jquery UI widget - jquery-ui

Question

I'm trying to create a custom knockout bindingHandler to add a custom jQuery UI widget but have run into trouble trying to access the elements created during binding. I'm sure there's something fundamental about this that I'm missing. I have the 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 the 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 the widget is created, it needs to find each th element created from the binding. However, the elements don't appear to be created at that point in time. I have tried both the init and update methods of the bindinghandler.
This works if I manually add the widget to the element, just not within the bindinghandler.
When and how do I access the elements created from data-binding so that my jQuery widget can modify them?

Answer 1

You need to take control of the bindings to your descendant elements within your custom binding handler.
See http://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html
But basically, do something like:
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() { ... }
};