Вызова конкретные компоненты в Эмбере

Question

Я получил компоненты «комментарии»

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

который присутствует несколько раз в HTML:

Product A: 
{{comments}} 

Product B: 
{{comments}} 

etc. 

Если установить «комментарии» все компоненты Отрендерьте Комментарии. Как я могу сообщить 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/