Reputation: 77
I can't access to my array controller variables. I have this simple application for example:
App.js
App = Ember.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter.extend();
App.Router.map(function() {
this.route('hello');
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('hello');
}
});
App.HelloController = Ember.ArrayController.extend({
name: 'tom'
});
App.HelloRoute = Ember.Route.extend({
model: function() {
return this.store.find('hello');
}
});
App.Hello = DS.Model.extend({
title: DS.attr('string')
});
App.Hello.FIXTURES = [{
id: 1,
title: 'hello'
},{
id: 2,
title: 'hello'
}];
and my views are:
<script type="text/x-handlebars" data-template-name="application">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="hello">
{{#each}}
{{title}} {{name}}
{{/each}}
</script>
when i save this code the page just render "hello" "hello" and i expect "hello tom" "hello tom". What i'm doing wrong?
Help is appreciated!
Upvotes: 2
Views: 927
Reputation: 47367
The problem is you're changing the context in your each statement to the model, so you no longer have the name in context.
http://emberjs.jsbin.com/UzUxIwa/1/edit
<script type="text/x-handlebars" data-template-name="hello">
{{#each item in controller}}
{{item.title}} {{controller.name}}
{{/each}}
</script>
Honestly even better than this would be to use an itemController and put the property on that controller
http://emberjs.jsbin.com/UzUxIwa/2/edit
App.HelloController = Ember.ArrayController.extend({
itemController:'singleHello'
});
App.SingleHelloController = Ember.ObjectController.extend({
name: 'tom'
});
{{#each item in controller}}
{{item.title}} {{item.name}}</br>
{{/each}}
Upvotes: 2