在Meteor模板中渲染任意嵌套对象的可接受方法是什么?

时间:2015-02-03 00:32:50

标签: meteor spacebars

我正在从模板助手返回一个将其他对象嵌入到任意深度(表示目录树)的对象,我想将它作为嵌套列表呈现到我的模板中。由于空格键的原理是将逻辑排除在模板之外,它所提供的只是循环和if语句。这适用于迭代大多数对象和数组,甚至是嵌套到已知深度的对象,但对于任意深度的对象,这是不够的。我想出了一些不同的可能策略,我觉得这些策略都不是特别干净:

  • 在模板助手中,返回一个展平的深度优先目录列表,每个目录都标有深度。然后,在模板中使用一些丑陋的逻辑,我可以根据下一个目录的深度创建和关闭li标签。呸。
  • 我可以让我的模板助手从数据中构建HTML并将其返回到要显示的模板,承诺在我的模板帮助器中具有表现性内容的其他基本罪。
  • 承认,实际上,我的UI必须对它一次显示的文件夹的深度有一些限制,并且只是在我的模板中使用嵌套for循环。这将导致4-5个丑陋的嵌套for循环,并且设计不灵活。
  • 完全跳过模板助手并用jquery手动操作dom,将它全部包装在Deps.Autorun中以保持反应性。这可能需要一些hackyness来模仿blaze保持dom与数据同步的方式。

我必须在这里忽视一些事情。有什么想法吗?

1 个答案:

答案 0 :(得分:5)

为什么不使用递归模板?

<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" }
      ]
    }
  }
})
相关问题