javascript - KockoutJS 外部模板引擎和自定义绑定(bind)

Question

我在我的应用程序中使用 KockoutJS External Template Engine能够加载外部模板文件(这样我就可以在许多页面中再次使用它们)。它运行良好，我可以使用另一个文件夹中的模板并且数据正确显示

我的问题是，我想在模板完全渲染后调用一些函数，并且我使用了这个 solution使用自定义绑定(bind)(感谢@RP Niemeyer)。

问题在于，使用外部模板文件时，自定义绑定(bind)是在模板 html 完全呈现之前执行的。

但是使用我的 html 页面中存在的模板，自定义绑定(bind)会在模板 html 完全呈现后执行。
我的模板:

<script type="text/html" id="report-template">
    <li>
        <a href="#" data-bind="text: Name, click: $root.ReportsViewModel.ShowParameters"></a>
        <ul data-bind="template: { name: 'report-template', foreach: childItems }">
        </ul>
    </li>
</script>

这就是我如何调用自定义绑定(bind)jsTree

<div id="reports-tree">
    <ul data-bind="template: { name: 'report-template', foreach: $root.ReportsViewModel.Reports }, jsTree: $root.ReportsViewModel.Reports"></ul>
</div>

这是我的自定义绑定(bind)代码:

ko.bindingHandlers.jsTree = {
    update: function (element, valueAccessor) {
        var reports = ko.utils.unwrapObservable(valueAccessor());
        if (reports.length > 0) {
            $(element).parent().jstree({
                "themes": {
                    "theme": "default",
                        "dots": false,
                        "icons": true,
                        "utl": "/jstree-style.css"
                },
                    "plugins": ["themes", "html_data"]
            });
        }
    }
}

Answer 1

This answer建议您可以使用 setTimeout 来发挥您的优势:它将您的自定义绑定(bind)移动到执行队列的末尾。

ko.bindingHandlers.jsTree = {
    update: function (element, valueAccessor) {
        setTimeout(function () {
            var reports = ko.utils.unwrapObservable(valueAccessor());

            if (reports.length > 0) {
                $(element).parent().jstree({
                    "themes": {
                        "theme": "default",
                        "dots": false,
                        "icons": true,
                        "utl": "/jstree-style.css"
                    },
                    "plugins": ["themes", "html_data"]
                });
            }
        }, 0);
    }
};

不过，我不确定这对于递归绑定(bind)的效果如何。