Ember-Data template
HTML
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/data/ember-data-latest.js"></script>
<script type="text/x-handlebars">
<h3>items :</h3>
{{#each App.itemsController}}
<div>
<div>id: {{id}}</div>
<div>name:{{name}}</div>
<div>tags:({{tagline}})</div>
</div>
<br></br>
{{/each}}
</script>
JavaScript
App = Ember.Application.create();
App.store = DS.Store.create({
adapter: 'DS.fixtureAdapter',
revision: 10
});
App.Tag = DS.Model.extend({
name: DS.attr('string'),
item: DS.belongsTo('App.Item')
});
App.Item = DS.Model.extend({
name: DS.attr('string'),
tags: DS.hasMany(App.Tag),
tagline: function(){
//only way I found to access to tag's name, but as simple js object instead of an ember object
console.log(this.get('data').hasMany.tags.map(function(tag){
return tag.name;
}).join(','));
return this.get('tags').toArray().map(function(tag){
return tag.get('name');
}).join(',');
}.property('[email protected]')
});
App.Tag.FIXTURES = [{
id: '1',
name:'bar'
}, {
id: '2',
name:'baz'
}, {
id: '3',
name:'test'
}];
App.Item.FIXTURES = [{
id: '1',
name: 'first',
tags:['1', '2']
}, {
id: 2,
name: 'second',
tags: ['3']
}, {
id: 3,
name: 'third',
tags: []
}];
App.itemsController = Ember.ArrayController.create({
content: App.store.findAll(App.Item)
});