将数组传递给ember 2.2中的组件

时间:2015-12-09 17:08:19

标签: ember.js

我正在尝试使用组件显示简单列表。我正在阅读控制器将在2.0中限制使用所以我不确定为什么这不起作用。我很感激任何指导。

HTML

<script type="text/x-handlebars" id="index">
  <h2>Ember.js 2.2.0 - Display List</h2>
  {{display-list items=listItems}}
</script>

<script type="text/x-handlebars" id="components/display-list">
List:
  <ul>
    {{#each items as |item|}}
      <li>{{item}}</li>
    {{/each}}
  </ul>
</script>

的javascript

var App = Ember.Application.create();


App.IndexRoute = Ember.Route.extend({
  model: function() {
    return {
      listItems:  [ "Item 1", "Item 2" ]      
    };
  }
});


App.DisplayListComponent = Ember.Component.extend({
});

http://jsfiddle.net/g8zyLk4g/1/

1 个答案:

答案 0 :(得分:0)

在您的情况下,模板中的项目可通过model.listItems

进行访问

因此,当调用组件时,请使用它{{display-list items=model.listItems}}

或者您可以直接从模型中返回项目

model: function() {
 return [ "Item 1", "Item 2" ];
}

然后您可以参考模板{{display-list items=model}}

中的模型

http://jsfiddle.net/g8zyLk4g/2/

希望这有帮助。