Question

我遇到了jqWidgets KnockoutJS UI控件的问题。我的目标是能够创建一个淘汰下拉树。他们有一个jQueryUI形式here的例子，但没有在KnockoutJS中。我认为问题是由于渲染操作的顺序。当然，我已尝试过多种方法来实现这一目标，例如

<div data-bind="jqxDropDownButton:{}"><div data-bind="jqxTree:{}"></div</div>

上面代码的问题是jqxDropDownButton呈现html覆盖内部jqxTree html，然后根本不会实现渲染。我还尝试使用ko.bindingHandlers.customDropDownTree进行编程。在这个例子中，我尝试将每个控件渲染为一个html变量，然后将jqxDropDownButton html包装在jqxTree周围。这有点起作用，但它将包装放在错误的地方。有人可以帮忙吗???

<div data-bind="customDropDownTree:{}"></div>
ko.bindingHandlers.customDropDownTree = {
init: function (element, valueAccessor, allBindings, viewModel) {
    var $el = $(element),
        $btn = $('<div />'),
        options = ko.unwrap(valueAccessor()),
        src = {
            datatype: 'json',
            datafields: [{
                name: 'id'
            }, {
                name: 'parentID'
            }, {
                name: 'label'
            }, {
                name: 'value'
            }, {
                name: 'html'
            }, {
                name: 'disabled'
            }, {
                name: 'checked'
            }, {
                name: 'expanded'
            }, {
                name: 'selected'
            }, {
                name: 'items'
            }, {
                name: 'icon'
            }, {
                name: 'iconsize'
            }],
            id: 'id',
            localdata: options.source
        },
        dp = new $.jqx.dataAdapter(src, {
            loadComplete: function (records) {
                $el.jqxTree({
                    source: dp.records
                });
            }
        });
    dp.dataBind();

    $btn.jqxDropDownButton();
    $el.jqxTree();

    $btn.on('open', function () {
        if ($el.jqxDropDownButton('isOpened')) {}
    });



    $el.on('select', function (event) {
        var args = event.args,
            item = $el.jqxTree('getItem', args.element),
            ddContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + item.label + '</div>';
    });

    $btn.jqxDropDownButton('setContent', '<div style="position: relative; margin-left: 3px; margin-top: 5px;">Select Category</div>');

    $el.wrap($btn.html());
    ko.utils.domNodeDisposal.addDisposeCallback($el, function () {
        $el.jqxTree("destroy");
    });
    ko.utils.domNodeDisposal.addDisposeCallback($btn, function () {
        $btn.jqxDropDownButton('destroy');
    });
}};

Answer 1

我不熟悉您正在使用的工具，但看起来您可以使用jqxDropDownButton和jqxTree的自定义绑定处理程序，唯一的问题是您不能同时使用它们。

看看＆＃34;包装＆＃34; this document的部分。您应该可以调用自定义绑定处理程序＆＃39;新自定义绑定处理程序中的init和update例程。由于jqxDropDownButton显然会在其init上写入HTML，因此您需要首先应用HTML，然后jqxTree应用于其中的元素。这应该按照你想要的方式组合在一起。

如何在Knockout DropDownButton中包装Knockout树？

1 个答案: