1

How do I get a Handelbars template to loop through a model's properties and print them all on the screen?

Here's my router:

App.Router.map(function () {
  // Add your routes here
  this.resource('notifications', { path: '/notifications' });
  this.resource('notification', { path: '/notifications/:notification_id' });
});

The dynamic segment is working and I can retrieve a particular model by going to /notification/0, for example.

In my notification.hbs, I can do {{model.status}} and it properly displays that property from my model, which is a string that equals "CLOSED". However, my app is going to contain many different models which need to be printed out entirely, and I was trying to figure out a way to loop through the entire model dynamically. I would like to put something like this in my template:

{{#each property in model}}
  <li>{{property.key}}: {{property.value}}</li>
{{/each}}

. . . Which would output this:

Date: 2014-09-18
Status: CLOSED
Assigned: Yes
Description: Blah

A side question, I suppose, is how do I view the current model object in Chrome with Ember tools? In trying to figure out my main question, I went to the Chrome console to try to get info about the model object, to see what I could get out of it. I typed model in the console and got ReferenceError: model is not defined.

hourback
  • 1,150
  • 4
  • 12
  • 27
  • 1
    Of course, I found a similar question as soon as I posted this one: https://stackoverflow.com/questions/12415299/iterating-over-a-models-attributes-in-emberjs-handlebars-template :-) Seeing if that fixes my problem. – hourback Sep 18 '14 at 18:56
  • 1
    You'll want to be careful about that approach if you're data is changing, it won't do data bindings (meaning adding a property or changing properties wouldn't update the ui). At the same time if the data won't change you're good with this approach – Kingpin2k Sep 18 '14 at 20:42

0 Answers0