CODEWITHSUNDEEP
meteormeteor-blaze
James Newton
James Newton

Reputation: 7124

Use a function inside {{#each element}} in Meteor?

In a Meteor project, I have a collection of documents which can have one of two formats. To simplify, a given document may either have a type property or a label property. I would like to display this is a multiple select element, using whichever property they have to identify them.

Here's a working example:

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" }
    ]
  }
})

This happily displays:

1: type
2: label

However, this is a simplification. The actual data that I want to display is more complex than this. I would rather not put all the concatenation logic into the HTML template. I would much rather call a JavaScript function, passing it the current document, and get the string to display. Something like:

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

How could I do this with Meteor?

Upvotes: 0

Views: 137

Answers (1)

James Newton
James Newton

Reputation: 7124

Answering my own question, I have found that I can change my template to include this line...

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

And my helpers entry to use the map method:

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 }
    })
  }
})

Upvotes: 1

Related Questions