Ember-Data template
by MikeAski
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">
{{App.productController.content.name}}
<br><br>
{{view App.itemsView contentBinding="App.productController.content.items"}}
</script>
<script type="text/x-handlebars" data-template-name="item">
{{view.content.name}}
{{view App.itemsView contentBinding="view.content.items"}}
</script>
JavaScript
window.App = Ember.Application.create();
App.store = DS.Store.create({
revision: 4,
adapter: DS.fixtureAdapter
});
App.Product = DS.Model.extend({
name: DS.attr('string'),
items: DS.hasMany('App.Item', {key: 'itemIds'} ),
});
App.Item = DS.Model.extend({
name: DS.attr('string'),
items: DS.hasMany('App.Item', {key: 'itemIds'} ),
item: DS.belongsTo('App.Item'),
product: DS.belongsTo('App.Product')
});
App.Product.FIXTURES = [
{id: 1,
name: 'Product1',
itemIds: [2,3,6]
}
];
App.Item.FIXTURES = [
{id: 3,
name: 'item 3 belongs to product',
itemIds: []
},
{id: 2,
name: 'item 2 belongs to product',
itemIds: [4,5]
},
{id: 5,
name: 'item 5 belongs to item 2',
itemIds: [7]
},
{id: 4,
name: 'item 4 belongs to item 2',
itemIds: []
},
{id: 6,
name: 'item 6 belongs to product',
itemIds: []
},
{id: 7,
name: 'item 7 belongs to item 5',
itemIds: [8]
},
{id: 8,
name: 'item 8 belongs to item 7',
itemIds: []
}
];
App.productController = Ember.ObjectController.create({
content: App.store.find(App.Product, 1)
});
App.itemsView = Ember.CollectionView.extend({
itemViewClass: Ember.View.extend({
templateName: 'item'
})
})