Call specific Component in Ember - ember.js

Question

I've got a Component "comments"
<div class="comments">
<ul>
{{#each comment in comments}}
...
</ul>
</div>
which is present multiple times in the HTML:
Product A:
{{comments}}
Product B:
{{comments}}
etc.
If I set "comments" all Components render the comments. How can I tell Ember to set the Comments for a specific Product only? e.g. on headline click and Ajax Load.
JS Bin: http://jsbin.com/wafacojenahe/2/edit

Answer 1

Two issues with your code.
You didn't have any hierarchy (or sets of) in the data. This has a basic structure in place:
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"
]
}
];
}
});
And the other issue is that components always need to be passed all data in.
<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/