meteor - 在 Meteor 的模板中呈现任意嵌套对象的公认方法是什么?

标签 meteor spacebars

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

  • 在模板助手中,返回一个扁平化的深度优先目录列表,每个目录都标有深度。然后,在模板中使用一些丑陋的逻辑,我可以根据下一个目录的深度创建和关闭 li 标签。讨厌。
  • 我可以让我的模板助手根据数据构建 HTML 并将其返回到要显示的模板,犯了另一个主要错误,即在我的模板助手中包含表示性内容。
  • 承认,实际上,我的 UI 必须对其一次显示的文件夹深度有一些限制,并且只在我的模板中使用嵌套 for 循环。这将导致 4-5 个难看的嵌套 for 循环和不灵活的设计。
  • 完全跳过模板助手并使用 jquery 手动操作 dom,将其全部包装在 Deps.Autorun 中以保持 react 性。这可能需要一些 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" }
      ]
    }
  }
})

关于meteor - 在 Meteor 的模板中呈现任意嵌套对象的公认方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28289392/

相关文章:

javascript - 如何在不使用助手的情况下访问 Meteor 模板中的全局变量?

javascript - 将架构附加到 Meteor.users

meteor - 如何使用 Collections2 在 Meteor (JS) 中存储浮点值?

javascript - 误解 `each...in` 用 react 变量渲染

Meteor - 在模板参数中传递变量

javascript - meteor 在模板空格键中显示数组的第一个元素

javascript - Chrome 似乎在 Meteor/Blaze 中定义了 'event' 变量

带有 meteor 的 HTML(5)

jquery - meteor 以模态播放youtube视频

javascript - Blaze表单的template.data在第一次提交后去哪里了?