【问题标题】:What's the accepted way to render arbitrarily nested objects in a template in Meteor?在 Meteor 的模板中渲染任意嵌套对象的公认方法是什么?
【发布时间】:2015-04-02 02:05:07
【问题描述】:

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

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

我一定在这里忽略了一些东西。有什么想法吗?

【问题讨论】:

    标签: meteor spacebars


    【解决方案1】:

    为什么不使用递归模板?

    <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" }
          ]
        }
      }
    })
    

    【讨论】:

    • 我不知道递归模板是可能的。这是完美的,谢谢!
    猜你喜欢
    • 1970-01-01
    • 2020-02-15
    • 1970-01-01
    • 2015-06-11
    • 2014-12-12
    • 2021-10-28
    • 2017-05-19
    • 1970-01-01
    • 2015-12-17
    相关资源
    最近更新 更多