迭代生成包含把手（空格键）的模板

Question

所以为了简单起见，最终的模板需要如下所示：

<template name="Profile">
  <h1> This is a profile view </h1>
  <h4>Username</h4>
  <p>{{username}}</p>
  <h4>Name</h4>
  <p>{{name}}</p>
  <h4>Email:</h4>
  <p>{{email}}</p>
</template>

对应的助手如下：

Template.Profile.helpers({
  username: function() {
    return this.username;
  },
  email: function() {
    return this.emails[0].address;
  },
  name: function() {
    return this.profile.name;
  }
});

现在，随着新字段的添加，此模板将继续增长，为了保持代码简洁，我尝试将模板分成两个，如下所示：

<template name="Profile">
  <h1> This is a profile view </h1>
  {{#each items}}
    {{> Section}}
  {{/each}}
</template>

<template name="Section">
  <h4>{{label}}</h4>
  <p>{{ {{id}} }}</p>
</template>

并且新模板有这个对应的助手：

Template.Section.helpers({
  items: function() {
    var fields = [
      {label: "Username", id="username"},
      {label: "First Name", id="name"},
      {label: "Email Address", id="email"}
    ];
    return fields;
  }
});

主要是Sections 模板中的那个位，我试图以某种方式嵌套空格键：<p>{{ {{id}} }}</p>

我正在尝试的效果是，这些部分都迭代地组合到 Profile 模板中，然后看到 {{name}} 或 {{email}}，然后 Profile 助手填充该字段。

这有可能吗？

Answer 1

您的解决方案非常接近 - 您只需要从您的助手返回一组反应数据。试试这个：

Template.Profile.helpers({
  sections: function() {
    return [
      {label: 'username', data: this.username},
      {label: 'email', data: this.emails[0].address},
      {label: 'name', data: this.profile.name}
    ];
  }
});

<template name="Profile">
  <h1>This is a profile view</h1>
  {{#each sections}}
    {{> section}}
  {{/each}}
</template>

<template name="section">
  <h4>{{label}}</h4>
  <p>{{data}}</p>
</template>