我在我的应用程序中使用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"]
});
}
}
}