Question

我有一个组件＆＃34;评论＆＃34;

<div class="comments">
    <ul>
        {{#each comment in comments}}
            ...
    </ul>
</div>

在HTML中多次出现：

Product A:
{{comments}}

Product B:
{{comments}}

etc.

如果我设置＆＃34;评论＆＃34;所有组件都会呈现注释。如何告诉Ember仅为特定产品设置评论？例如在标题点击和Ajax加载。

JS Bin：http://jsbin.com/wafacojenahe/2/edit

Answer 1

您的代码存在两个问题。

您在数据中没有任何层次结构（或多组）。这有一个基本结构：

App = Ember.Application.create();

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return [
      {
        'name': 'Product A',
        'comments': [
          'Lorem ipsum',
          'dolor sit amet'
        ]
      },
      {
        'name': 'Product B',
        'comments': [
          "Another comment"
        ]
      }
    ];
  }
});

另一个问题是组件总是需要传递所有数据。

  <script type="text/x-handlebars" data-template-name="index">
    {{#each product in model}}
      <h1>{{product.name}}</h1>
      {{comments-list model=product.comments}}
    {{/each}}
  </script>

  <script type="text/x-handlebars" id="components/comments-list">
    <ul>
      {{#each model}}
        <li>{{this}}</li>
      {{/each}}
    </ul>
  </script>

JS Bin：http://jsbin.com/wafacojenahe/3/

在Ember中调用特定组件

1 个答案: