在流星中使用动态模板答案

【问题标题】：Using dynamic templates in meteor在流星中使用动态模板
【发布时间】：2018-03-03 13:56:03
【问题描述】：

我真的被困在尝试在流星中使用动态模板，并将过滤器应用于填充它们的数据。非常感谢您的帮助。

举一个简单的例子，我希望能够将任务输入到待办事项列表中，并带有标签，无论是大任务还是小任务。然后我希望能够分别显示一个大任务表和一个小任务表。

这里有一些代码摘录，改编自官方的流星火焰教程，因此您可以大致了解我正在尝试做什么。

body.html 提取

<body>
  <div class="container">
    <header>
      <h1>Todo List</h1>

        <form class="new-task">
          <input type="text" name="text" placeholder="Type to add new tasks" />
          <input type="text" name="taskType" placeholder="Big/little" />
          <button type = "submit">submit</button>
        </form>
    </header>
    <h1>big tasks</h1>
    <ul>
      {{> Template.dynamic template="task" data=bigTasks}}
    </ul>
    <h1>little tasks</h1>
    <ul>
      {{> Template.dynamic template="task" data=littleTasks}}
    </ul>
  </div>
</body>

task.html 提取

 <template name="task">
  <li class="{{#if checked}}checked{{/if}}">
    <button class="delete">&times;</button>

    <input type="checkbox" checked="{{checked}}" class="toggle-checked" />

    <span class="text">{{text}}</span>
  </li>
</template>

task.js 提取

Template.task.helpers({
  bigTasks() {
    return Tasks.find({}, { taskType: Big, sort: { createdAt: -1 } });
  },
});

Template.task.helpers({
  littleTasks() {
    return Tasks.find({}, { taskType: Little, sort: { createdAt: -1 } });
  },
});

我意识到这可能更像是一个教程请求，而不是一个特定的问题，但如果你能提供任何东西，我将不胜感激

【问题讨论】：

标签： templates meteor dynamic

【解决方案1】：

您的代码存在许多问题。

首先，您以错误的方式使用Template.dynamic。它应该包含名称为 dynamic 的模板。

其次，使用Template.dynamic 你正在使用data=<helper name>。这是正确的形式，但您在Template.body 中使用它，所以这些助手也应该在Template.body 中，而不是在Template.task 中。

而且，第三个问题是您忘记将 task 模板内容包装在 {{#each}}...{{/each}} 中。

由于您的问题是关于使用Template.dynamic，所以它应该是这样的（尽管还有另一种更好的方法来实现它）：

Template.body.helpers({
  bigTasks() {
    const tasks = Tasks.find({}, { taskType: Big, sort: { createdAt: -1 } }).fetch();
    return { tasks };
  },
  littleTasks() {
    const tasks = Tasks.find({}, { taskType: Little, sort: { createdAt: -1 } }).fetch();
    return { tasks };
  },
});

task.html：

<template name="task">
  {{#each tasks}}
    <li class="{{#if checked}}checked{{/if}}">
      <button class="delete">&times;</button>
      <input type="checkbox" checked="{{checked}}" class="toggle-checked" />
      <span class="text">{{text}}</span>
    </li>
  {{/each}}
</template>

【讨论】：

Styx - 非常感谢。通过对辅助函数的语法进行一些更改（单独详细说明），我能够让它工作。非常感谢您的帮助，祝一切顺利！
@Mark 很高兴它有帮助。不要忘记接受我的回答。

【解决方案2】：

对于遇到相同挑战的任何人，Styx 的上述回答都有效，但我发现我还需要对辅助函数的语法进行一些更改：

Template.body.helpers({
  bigTasks() {
    // Show newest tasks at the top
    const tasks = Tasks.find({taskType: "Big"}, {sort: { createdAt: -1 } }).fetch();
  return { tasks };
  },
  littleTasks() {
    // Show newest tasks at the top
    const tasks = Tasks.find({taskType: "Little"}, {sort: { createdAt: -1 } }).fetch();
  return { tasks };
  },
});

Styx - 非常感谢。我真的很感谢你花时间帮助这个新手找到我的路。万事如意！

【讨论】：