关于基因敲除.js:基因敲除自定义绑定处理程序和自定义jquery UI小部件

 2021-04-26 

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() { ... }
};