How to pass computed properties from route to component - ember.js

Question

Taking the following as an example:
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each model as |item|}}
<li>{{item}}</li>
{{/each}}
{{magnus-component name=firstName}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="components/magnus-component">
<!-- Doesn't appear -->
{{name}}
</script>
...and
App = Ember.Application.create();
App.Router.map(function() {
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return ['red', 'yellow', 'blue'];
},
name: "Magnus",
surname: "Womble",
fullName: Ember.computed('name', 'surname', function(){
return this.get('name') + ' '+this.get('surname');
})
});
Which can be found in the following jsbin:
http://emberjs.jsbin.com/higako/edit?html,js,output
How do you correctly pass the fullName property to the component template?

Answer 1

You should move your logic from IndexRoute to IndexController:
App.IndexController = Ember.Controller.extend({
name: "Magnus",
surname: "Womble",
fullName: Ember.computed('name', 'surname', function(){
return this.get('name') + ' '+this.get('surname');
})
});
And then, if you use:
{{magnus-component name=fullName}}
instead of (firstName isn't defined anywhere):
{{magnus-component name=firstName}}
It will work.
Working demo.