在 Meteor 的模板中呈现任意嵌套对象的公认方法是什么?
What's the accepted way to render arbitrarily nested objects in a template in Meteor?
我正在 return 将一个对象从模板助手嵌入到任意深度(代表目录树),我想将它作为嵌套列表呈现到我的模板中。由于空格键的理念是将逻辑排除在模板之外,因此它提供的只是 for 循环和 if 语句。这对于遍历大多数对象和数组来说很好,甚至是嵌套到已知深度的对象和数组,但对于任意深度的对象来说,这是不够的。我想出了几个不同的可能策略,none 我觉得其中特别干净:
- 在模板助手中,取而代之的是 return 扁平化的深度优先目录列表,每个目录都标记有深度。然后,在模板中使用一些丑陋的逻辑,我可以根据下一个目录的深度创建和关闭 li 标签。呸
- 我可以让我的模板助手从数据构建 HTML 并将其 return 到要显示的模板,犯下另一个主要错误,即在我的模板助手中包含展示内容。
- 承认,实际上,我的 UI 必须对其一次显示的文件夹深度有一些限制,并且只需在我的模板中使用嵌套 for 循环。这将导致 4-5 个丑陋的嵌套 for 循环和不灵活的设计。
- 完全跳过模板助手并使用 jquery 手动操作 dom,将其全部包装在 Deps.Autorun 中以保持反应性。这可能需要一些 hackyness 来模拟 blaze 保持 dom 与数据同步的方式。
我一定是忽略了什么。有什么想法吗?
为什么不使用递归模板?
<template name="tree">
{{value}}
<ul>
{{#each children}}
<li>{{> tree}}</li>
{{/each}}
</ul>
</template>
<template name="container">
{{> tree treeData}}
</template>
Template.container.helpers({
treeData: function () {
return {
value: "level 1",
children: [
{ value: "level 2" },
{ value: "level 2" },
{ value: "level 2" }
]
}
}
})
我正在 return 将一个对象从模板助手嵌入到任意深度(代表目录树),我想将它作为嵌套列表呈现到我的模板中。由于空格键的理念是将逻辑排除在模板之外,因此它提供的只是 for 循环和 if 语句。这对于遍历大多数对象和数组来说很好,甚至是嵌套到已知深度的对象和数组,但对于任意深度的对象来说,这是不够的。我想出了几个不同的可能策略,none 我觉得其中特别干净:
- 在模板助手中,取而代之的是 return 扁平化的深度优先目录列表,每个目录都标记有深度。然后,在模板中使用一些丑陋的逻辑,我可以根据下一个目录的深度创建和关闭 li 标签。呸
- 我可以让我的模板助手从数据构建 HTML 并将其 return 到要显示的模板,犯下另一个主要错误,即在我的模板助手中包含展示内容。
- 承认,实际上,我的 UI 必须对其一次显示的文件夹深度有一些限制,并且只需在我的模板中使用嵌套 for 循环。这将导致 4-5 个丑陋的嵌套 for 循环和不灵活的设计。
- 完全跳过模板助手并使用 jquery 手动操作 dom,将其全部包装在 Deps.Autorun 中以保持反应性。这可能需要一些 hackyness 来模拟 blaze 保持 dom 与数据同步的方式。
我一定是忽略了什么。有什么想法吗?
为什么不使用递归模板?
<template name="tree">
{{value}}
<ul>
{{#each children}}
<li>{{> tree}}</li>
{{/each}}
</ul>
</template>
<template name="container">
{{> tree treeData}}
</template>
Template.container.helpers({
treeData: function () {
return {
value: "level 1",
children: [
{ value: "level 2" },
{ value: "level 2" },
{ value: "level 2" }
]
}
}
})