Knockout.js 如何将淘汰树包装在淘汰下拉按钮中？

我在使用jqWidgets KnockoutJS UI控件时遇到问题。我的目标是能够创建一个击倒下拉树。他们有一个jQueryUI格式的示例，但没有KnockoutJS格式的示例。我认为问题在于渲染的操作顺序。当然，我已经尝试了很多方法来实现这一点，比如

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

---

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

请查看的“包装器”部分。您应该能够从新的自定义绑定处理程序中调用自定义绑定处理程序的
init
和
update
例程。由于
jqxDropDownButton
显然是在其
init
上编写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');
    });
}};