1

我在我的应用程序中使用KockoutJS 外部模板引擎来加载外部模板文件（因此我可以在许多页面中再次使用它们）。效果很好，我可以在另一个文件夹中使用模板，并且数据正确显示

我的问题是我想在我的模板完全呈现后调用一些函数，并且我将此解决方案与自定义绑定一起使用（感谢@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"]
            });
        }
    }
}
4

1 回答 1

0

这个答案表明您可以利用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);
    }
};

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

于 2013-07-10T14:05:14.940 回答