Insert an image with ember model

Question

I have an ember app where I'm pulling data via an api. The app code looks like this...

index.html

<ul>
{{#each item in model}}
  <li>{{item.name}}</li>
{{/each}}
</ul>

...and the api source data is json and looks like this...

{"shots":[{"id":1,"name":"joe1","avatar_url":"http://s3.amazonaws.com/daily_comedy_app/shots/avatars/000/000/001/original/1_985u645296.jpg?1392926501"},{"id":2,"name":"cgrim1","avatar_url":"http://s3.amazonaws.com/daily_comedy_app/shots/avatars/000/000/002/original/1_O7iwbEe.jpg?1392926554"},{"id":3,"name":"Mac","avatar_url":"http://s3.amazonaws.com/daily_comedy_app/shots/avatars/000/000/003/original/2014-03-06_12.48.16.jpg?1394146693"},{"id":4,"name":"wintas","avatar_url":"http://s3.amazonaws.com/daily_comedy_app/shots/avatars/000/000/004/original/1_O7iwbEe.jpg?1397231591"}]}

The code above in my index page loads fine, but I am not able to add the avatar_url. When I try...

<ul>
{{#each item in model}}
  <li>{{item.avatar_url}}</li>
{{/each}}
</ul>

I get nothing....not even the path to the image.

I tried inserting an image tag like was suggested here...

In Ember.js templates, how does one print out model's property that will be use by HTML like the src for image or href for link

...but I don't get anything on in the browser, and there are no errors in the console.

What am I missing?

Update

//app.js

App.Shot = Ember.Model.extend({
  name: Ember.attr()
});

App.Shot.adapter = Ember.RESTAdapter.create();

App.Shot.url = "myapi.com/api/v1/shots?api_key=12d2d06fb2f6a786ac75b32625cf83a1";

App.Shot.collectionKey = "shots";

Answer 1

It seems like your model definition is lacking the avatar_url attribute.

App.Shot = Ember.Model.extend({
  name: Ember.attr(),
  avatarUrl: Ember.attr()
});