knockout custom bindinghandler and custom jquery UI widget
我试图创建一个自定义的剔除bindingHandler来添加一个自定义的jQuery UI小部件,但是尝试访问在绑定期间创建的元素时遇到了麻烦。我敢肯定,这是我所缺少的一些基本知识。我有以下html:
1 2 3 4 5 6 7 8 9 10 11 12 | <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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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); |
创建窗口小部件时,它需要查找从绑定创建的每个元素。但是,该元素似乎在该时间点未创建。我已经尝试了bindinghandler的init和update方法。
如果我手动将窗口小部件添加到元素中,而不是在绑定处理程序中,则此方法有效。
何时以及如何访问通过数据绑定创建的元素,以便我的jQuery小部件可以修改它们?
您需要在自定义绑定处理程序中控制到后代元素的绑定。
请参阅http://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html
但基本上,请执行以下操作:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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() { ... } }; |