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>

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

1 个答案: