Question

我真的不敢尝试在流星中使用动态模板，并对填充它们的数据应用过滤器。我非常感谢你的帮助。

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

以下是一些代码摘录，改编自官方流星火焰教程，因此您可以在一般意义上看到我尝试做的事情。

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 extract

 <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 extract

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

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

我意识到这可能是一个教程的请求，而不是一个特定的问题，但是对于你能提供的任何东西都会感激

Answer 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>

Answer 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 };
  },
});

冥冥 - 非常感谢。我真的很感谢你花时间帮助这个新手找到我的方式。一切顺利！

在流星中使用动态模板

2 个答案: