Как передать вычисленное свойство от маршрута к компоненту

Question

Беря следующий пример:

<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> 

... и

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'); 
    }) 
}); 

Что можно найти в следующем jsbin:

http://emberjs.jsbin.com/higako/edit?html,js,output

Как правильно передать свойство fullName компоненту templ ел?

Answer 1

Вы должны переместить логику из IndexRoute в IndexController:

App.IndexController = Ember.Controller.extend({ 
    name: "Magnus", 
    surname: "Womble", 
    fullName: Ember.computed('name', 'surname', function(){ 
    return this.get('name') + ' '+this.get('surname'); 
    }) 
}); 

И затем, если вы используете:

{{magnus-component name=fullName}} 

вместо (firstName нигде не определено):

{{magnus-component name=firstName}} 

Будет работать.

Working demo.