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

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

您的解决方案非常接近 - 您只需要 return 来自您的助手的反应数据数组。试一试：

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>

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

Iteratively generate a template containing handlebars (spacebars)

templates

meteor

spacebars