私は自分のアプリケーションでKockoutJS External Template Engineを使用して、外部テンプレート ファイルをロードできるようにしています (そのため、多くのページでそれらを再度使用できます)。それはうまく機能し、別のフォルダーのテンプレートを使用して、データを正しく表示できました
私の問題は、テンプレートが完全にレンダリングされた後にいくつかの関数を呼び出したいことであり、このソリューションをカスタムバインディングで使用しました(@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"]
});
}
}
}