Hi guys,
can you please help me with howto render non-application template into main application template? What I’m trying to achieve is a simple thing, render template itemlist into named outlet ‘content’ in the application template.
Problem is that Ember crashes eventually, obviously I’m missing something, can you please help me? Thanks a million in advance.
App = Ember.Application.create();
App.CommodityAdapter = DS.RESTAdapter.extend({
host: 'http://localhost:9080/myproject-1.0-SNAPSHOT'
});
App.Commodity = DS.Model.extend({
name: DS.attr('string'),
price: DS.attr('number'),
count: DS.attr('number'),
itemshot: DS.attr('string')
});
App.Router.map(function() {
this.resource('commodity', {path: '/commodity/:commodity_id'});
this.resource('itemlist', {path: '/'});
});
App.ItemListRoute = Ember.Route.extend({
model: function() {
return this.store.find('commodity');
}
});
App.ApplicationRoute = Ember.Route.extend({
renderTemplate: function(controller, model) {
this.render('itemlist', {into: 'application', outlet: 'content'});
}
});
Handlebars:
<script type="text/x-handlebars" data-template-name='application'>
{{outlet 'content'}}
</script>
<script type="text/x-handlebars" data-template-name='itemlist'>
<h2>Items in our shop</h2>
<div id='navigation' style="width: 600px; overflow: hidden; ">
<div style="width: 150px; float:left;">
<ul>
{{#each model}}
<li>
{{#link-to "commodity" this}}
{{name}}
{{/link-to}}
</li>
{{/each}}
</ul>
</div>
<div style="overflow: hidden;">
{{outlet}}
</div>
</div>
</script>
<script type="text/x-handlebars" id='commodity'>
<div>
<ul>
<li>{{name}}</li>
<li>{{price}}</li>
<li>{{count}}</li>
<li><img {{bindAttr src="itemshot"}} /></li>
</ul>
</div>
</script>
Maybe I’m entering it in the wrong format, I don’t really know…