在 Meteor 的 {{#each element}} 中使用函数？答案

【问题标题】：Use a function inside {{#each element}} in Meteor?在 Meteor 的 {{#each element}} 中使用函数？
【发布时间】：2015-12-18 10:27:34
【问题描述】：

在 Meteor 项目中，我有一组文档，可以有两种格式之一。为简化起见，给定文档可能具有type 属性或label 属性。我想显示这是一个多选元素，使用他们必须识别它们的任何属性。

这是一个工作示例：

HTML

<body>
  {{> test}}
</body>

<template name="test"> 
  <select name="elements" size="2">
    {{#each elements}}
      <option value="{{id}}">{{id}}: {{type}}{{label}}</option>
    {{/each}}
  </select>
</template>

JavaScript

Template.test.helpers({
  elements: function () {
    return [ 
      { id: 1, type: "type" }
    , { id: 2, label: "label" }
    ]
  }
})

这很高兴显示：

1: type
2: label

但是，这是一种简化。我要显示的实际数据比这更复杂。我宁愿不把所有的串联逻辑放到 HTML 模板中。我更愿意调用一个 JavaScript 函数，将当前文档传递给它，然后获取要显示的字符串。比如：

<option value="{{id}}">{{functionToCall_on_this}}</option>

我怎么能用 Meteor 做到这一点？

【问题讨论】：

如果您回答自己的问题，请不要仅仅通过编辑您的问题来回答。

标签： meteor meteor-blaze

【解决方案1】：

回答我自己的问题，我发现我可以更改我的模板以包含这一行...

<option value="{{id}}">{{id}}: {{string}}</option>

我的助手条目使用map 方法：

Template.test.helpers({
  elements: function () {
    data = [ 
      { id: 1, type: "type" }
    , { id: 2, label: "label" }
    ]

    return data.map(function (item, index, array) {
      var string = item.type || item.label
      return { id: item.id, string: string }
    })
  }
})

【讨论】：

为了将来参考，如果您的助手返回 HTML（而不仅仅是一个字符串），那么您将不得不使用三括号，例如：{{{html}}}