KnockoutJSマッピングプラグインを使用した再帰テンプレート
-
13-10-2019 - |
質問
私は、 KO.マッピングプラグイン, 、しかし、私が定義しない限り、私はそれをレンダリングすることができません 分ける 各レベルのテンプレート。
次の場合、私は再利用したい mvvmtreeviewgrouptemplate にとって MVVMTreeViewSubgroups 同様に、これはレンダリングされていませんが、これはバグですか、それとも実装されていない機能ですか?
<div id="treeViewArea">
<ul data-bind='template: {
name: "mvvmTreeViewGroupTemplate",
foreach: MvvmTreeItemGroups,
beforeRemove: function(elem) { $(elem).slideUp() },
afterAdd: function(elem) { $(elem).hide().slideDown() }
}'>
</ul>
</div>
<script type="text/x-jquery-tmpl" id="mvvmTreeViewGroupTemplate"> <li>
<span data-bind="text: Title" class="mvvmTreeItemStyle"/></br/> <ul data-bind='template: {
name: "mvvmTreeViewItemTemplate",
foreach: MvvmTreeItems,
beforeRemove: function(elem) { $ (elem).slideUp() },
afterAdd: function(elem) { $ (elem).hide().slideDown() }
}'>
<ul data-bind='template: {
name: "mvvmTreeViewSubGroupTemplate",
foreach: this.MvvmTreeItemSubGroups,
beforeRemove: function(elem) { $ (elem).slideUp() },
afterAdd: function(elem) { $ (elem).hide().slideDown() }
}'>
</ul>
</ul>
</li>
</script>
<script type="text/x-jquery-tmpl" id="mvvmTreeViewSubGroupTemplate"> <li>
<span data-bind="text: Title" class="mvvmTreeItemStyle"/></br/>
<ul data-bind='template: {
name: "mvvmTreeViewItemTemplate",
foreach: MvvmTreeItems,
beforeRemove: function(elem) { $ (elem).slideUp() },
afterAdd: function(elem) { $ (elem).hide().slideDown() }
}'>
</ul>
</li>
</script>
JSONとスクリプトは次のように見えます、
var data = {
MvvmTreeItemGroups: [
{
Id: 1, Title: 'Group 1',
MvvmTreeItemSubGroups: [{
Id: 1, Title: 'Group 11',
MvvmTreeItems: [{ Id: 'i111', Title: 'Item 111' },
{ Id: 'i112', Title: 'Item 112'}]
},
{
Id: 1, Title: 'Group 121',
MvvmTreeItems: [{ Id: 'i121', Title: 'Item
121' }, { Id: 'i122', Title: 'Item 122'}]
}],
MvvmTreeItems: [{ Id: 'i11', Title: 'Item 11' }, { Id:
'i12', Title: 'Item 12'}]
},
{
Id: 2, Title: 'Group 2',
MvvmTreeItemSubGroups: [{
Id: 1, Title: 'Group 211',
MvvmTreeItems: [{ Id: 'i211', Title: 'Item
211' }, { Id: 'i212', Title: 'Item 212'}]
},
{
Id: 1, Title: 'Group 121',
MvvmTreeItems: [{ Id: 'i121', Title: 'Item
121' }, { Id: 'i122', Title: 'Item 122'}]
}],
MvvmTreeItems: [{ Id: 'i21', Title: 'Item 21' },
{ Id: 'i22', Title: 'Item 22'}]
}]
};
var viewModel = ko.mapping.fromJS(data);
console.log(viewModel);
ko.applyBindings(viewModel, treeViewArea);
解決
私は自分の質問に対する答えを得ました このグーグルスレッド. 。それはまさに「再帰的なテンプレート」の問題ではありません。それは、その名前に配列がない場合、テンプレートがレンダリング方法を知らないためです。
問題を修正するには2つの方法があります。
そのようなテンプレートをレンダリングする前に、MVVMTreeItemGroupsアレイが実際に存在するかどうかを確認してください。
{{if $data.MvvmTreeItemGroups }} <ul data-bind='template: { name: "mvvmTreeViewGroupTemplate", foreach: MvvmTreeItemGroups }'> </ul> {{/if}}
INキーワードを使用して、MVVMTreeItemgroupsが実際に存在することを確認します
{if 'MvvmTreeItemGroups' in $data}} <ul data-bind='template: { name: "mvvmTreeViewGroupTemplate", foreach: MvvmTreeItemGroups }'> </ul> {{/if}}
フルフィドルがあります http://jsfiddle.net/mikekidder/xs7sy/
所属していません StackOverflow