Rendering array using Ember {{each}}

Question

A route /numbers has the JavaScript:

// app/routes/numbers.js
// ...
numbers: [1,2,3,4,5],
// ...

and in the route's template:

<!-- app/templates/numbers.hbs -->
{{#each numbers as |n|}}
  <p>{{n}}</p>
{{/each}}

When I view the /numbers route, nothing is rendered inside the {{each}} helper. Why not?

Note that any variables you want be accessed in templates, should be defined in controllers — Ebrahim Pasbani
– Ebrahim Pasbani, Commented Jul 6, 2016 at 6:38

xcskier56 · Accepted Answer · 2016-07-05 19:58:46Z

1

You cannot access properties that you set in the route in the template. If you want to access the numbers array in the template, then you will need to set it in the controller using setupController.

The "Ember way" to pass data to templates is to get the data in the route's model hook, then set it on the controller in setupController

In your route, do this:

model: function(params, transition) {
  return this.get('numbers');
},

setupController: function(controller, model) {
  controller.set('model', model);
}

then in your template, instead of accessing the numbers array, use model

{{#each model as |n|}}
  <p>{{n}}</p>
{{/each}}

for more information read this: https://guides.emberjs.com/v2.6.0/routing/specifying-a-routes-model/

answered Jul 5, 2016 at 19:58

xcskier56

6213 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

heat Over a year ago

setupController isn't necessary. But if you want setup another property to the controller. you use it. controller.set("number",model);

Collectives™ on Stack Overflow

Rendering array using Ember {{each}}

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related