Problem: JSON is received from the server, but only the property idmatters. The GUI only displays the string "2 1", but is {{photoName}}ignored. A manual call MyApp.PhotoController.get('content').objectAt(0).get('photoName')returns undefined, while it MyApp.PhotoController.get('content').objectAt(0).get('id')returns the correct identifier.
Any suggestions?
// My model:
MyApp.Photo = DS.Model.extend({
id: DS.attr('number'),
photoName: DS.attr('string'),
photoDescription: DS.attr('string'),
photoFullSizeURL: DS.attr('string'),
photoThumbnailURL: DS.attr('string')
});
MyApp.Photo.reopenClass({
url: 'photos.json'
});
// My StateManager
MyApp.stateManager = Ember.StateManager.create({
rootElement: '#mainArea',
initialState: 'showMainView',
showMainView: Ember.ViewState.create({
enter: function(stateManager) {
this._super(stateManager);
var photos = MyApp.store.findAll(MyApp.Photo);
MyApp.PhotosController.set('content', photos);
},
view: Em.ContainerView.create({
childViews: ['photoListView'],
photoListView: Em.View.extend({
elementId: 'photoList',
templateName: 'photo-list-view',
contentBinding: 'MyApp.PhotosController.content'
})
})
})
})
// My controller:
MyApp.PhotosController = Ember.ArrayProxy.create({
content: []
});
// My template:
<script type="text/x-handlebars" data-template-name="photo-list-view">
PHOTOS:<br/>
{{#each content}}
{{photoName}} {{id}}
{{/each}}
</script>
// JSON Received from server:
[
{
"id": 2,
"photoName": "Bird Photo",
"photoDescription": "Bird Photo Description",
"photoFullSizeUrl": "photos/bird.jpg",
"photoThumbnailUrl": "photos/bird_thumb.png"
},
{
"id": 1,
"photoName": "Bird Photo 2",
"photoDescription": "Bird Photo Description 2",
"photoFullSizeUrl": "photos/bird.jpg",
"photoThumbnailUrl": "photos/bird_thumb.png"
}
]
The code is also posted as a Gist here: https://gist.github.com/2775283