javascript - Knockout.js - 绑定(bind)组件后应用自定义绑定(bind)

Question

我正在为 jquery ui 菜单小部件使用自定义 menu 绑定(bind)。在我的菜单的 HTML 中，我使用了一个组件。它看起来像这样:

<ul data-bind="menu: {...}">
    <!-- ko foreach: menuComponents -->
    <li>
        <div data-bind="component: $data"></div>
    </li>
    <!-- /ko -->
</ul>

我的自定义绑定(bind)在初始化菜单之前使用 applyBindingsToDescendents() 解析 ul 内的绑定(bind)。这是我的绑定(bind)的简化版本。

ko.bindingHandlers.menu = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        ko.applyBindingsToDescendants(bindingContext, element);

        $(element).menu();

        return {controlsDescendantBindings: true};
    }
};

问题在于组件是异步加载的。我正在使用自定义组件加载器，但我不确定这是否重要。副作用是组件加载后才会解析组件绑定(bind)。所以加载顺序如下所示:

1. 菜单绑定(bind)初始化开始
2. 后代绑定(bind)通过applyBindingsToDescendents来应用
3. jQuery 菜单小部件已初始化
4. 组件异步初始化和绑定(bind)

由于组件在应用绑定(bind)后才初始化，因此我的菜单无法正确呈现。

有什么方法可以强制同步应用组件后代绑定(bind)吗？或者有什么方法可以检测它们何时被应用并刷新菜单小部件？

Answer 1

我目前的工作解决方案是完全避免使用组件。我只是使用模板绑定(bind)并手动应用 View 模型。

<ul data-bind="menu: {...}">
    <!-- ko foreach: menuItems -->
    <li>
        <div data-bind="template: {name: $data.template, data: $data.data}"></div>
    </li>
    <!-- /ko -->
</ul>

我尝试对我的组件使用同步选项，但问题是它不能保证同步操作。另一个解决方案是在 setTimeout 调用中绑定(bind)我的菜单，但我避免了这个解决方案，因为它可能会导致其他问题。但这看起来像这样:

ko.bindingHandlers.menu = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        ko.applyBindingsToDescendants(bindingContext, element);

        setTimeout(function() {
            $(element).menu();
        });

        return {controlsDescendantBindings: true};
    }
};