Emberjs model rendering

Question

I just started learning emberjs and wanted to display a list of data from the models. My app.js:

var h= [{
name: "Hi",
},
{
name: "Hello",
}
];
App.ListsRoute = Ember.Route.extend({
model: function(){
    return h;
}
});

my corresponding lists handlebar:

<div id="list">
    <ul>
        {{#each}}
        <li>
        {{ name }}</li>
        {{/each}}
    </ul>
</div>

I get the error as:

Error: Assertion Failed: The value that #each loops over must be an Array. You passed (generated lists controller)

What is that I can do to display those?

Answer 1

#each wants to iterate over a list. Since you didn't give it an argument, it defaults to trying to iterate over your ListsController. Unfortunately, since you didn't define it, the controller was auto-generated based on the plain Ember.Controller. Thus, the error.

Two ways to fix this:

1) Make ListsController into an ArrayController

App.ListsController = Ember.ArrayController.extend({});

2) Tell #each to target your model instead of controller.

<div id="list">
    <ul>
        {{#each model}}
            <li>{{ name }}</li>
        {{/each}}
    </ul>
</div>