如何将计算属性从路径传递给组件

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属性传递给组件模板？

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

它会工作.

工作演示.