KockoutJS 外部模板引擎和自定义绑定答案

【问题标题】：KockoutJS External Template Engine and custom bindingKockoutJS 外部模板引擎和自定义绑定
【发布时间】：2013-07-10 11:16:04
【问题描述】：

我在我的应用程序中使用KockoutJS External Template Engine 来加载外部模板文件（这样我就可以在许多页面中再次使用它们）。效果很好，我可以使用另一个文件夹中的模板和正确显示的数据

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

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

但是使用我的 html 页面中存在的模板，自定义绑定在模板 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>

这就是我如何称呼我的自定义绑定jsTree

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

这是我的自定义绑定代码：

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"]
            });
        }
    }
}

【问题讨论】：

嗨！你会在任何时候对我的回答做出反应吗？
我的项目中有动画，我不想添加计时器
嗯...但我没有添加 real 计时器 - 将超时设置为 0 只是将回调函数与当前上下文分离。你试过了吗？

标签： javascript templates knockout.js

【解决方案1】：

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

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);
    }
};

不过，我不确定这与递归绑定的效果如何。

【讨论】：