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

它会起作用。

Working demo.

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

1 个答案: