ember link-to from the component - templates

Question

i am new at EmberJs.
I tried to link from the component "invoices-list" to invoice.
invoices-list.hbs
{{#each invoices as |invoice|}}
<tr>
<td>{{invoice.kdnr}}</td>
<td>{{invoice.rnr}}</td>
<td>{{invoice.invoiceId}}</td>
<td>**{{#link-to 'invoice' invoice.invoiceId}}Click here{{/link-to}}**</td>
</tr>
{{else}}
<p>No datas</p>
{{/each}}
invoices.hbs
{{invoices-list invoices=model}}
router.js
Router.map(function() {
this.route('invoices');
this.route('invoice', { path: '/invoice/:invoice_id' });
});
My problem is, the template will not rendered and i get the error: "props.parentView.appendChild is not a function"
What is wrong?
Thanks for help.
Fabian

Answer 1

Let me give you first an example how to use Link-to
Suppose this is your Route.js
Router.map(function() {
this.route('photos', function(){
this.route('edit', { path: '/:photo_id' });
});
});
and this is app/templates/photos.hbs
<ul>
{{#each photos as |photo|}}
<li>{{#link-to "photos.edit" photo}}{{photo.title}}{{/link-to}}</li>
{{/each}}
</ul>
then rendered HTML would be
<ul>
<li>Happy Kittens</li>
<li>Puppy Running</li>
<li>Mountain Landscape</li>
</ul>
so in your case this is Route
Router.map(function() {
this.route('invoices');
this.route('invoice', { path: '/invoice/:invoice_id' });
});
then you may use this
{{#each invoices as |invoice|}}
<tr>
<td>{{invoice.kdnr}}</td>
<td>{{invoice.rnr}}</td>
<td>{{#link-to 'invoice' invoice}}{{/link-to}}</td>
</tr>
{{else}}
<p>No datas</p>
{{/each}}
another example to clarify:
//Route.js
this.route('contacts');
this.route('contact', { path: 'contacts/:contact_id' });
//Contacts.hbs
{{#each model as |contact|}}
<tr>
<td>{{link-to contact.name 'contact' contact}}</td>
<td>{{link-to contact.email 'contact' contact}}</td>
<td>{{contact.country}}</td>
</tr>
{{/each}}
Hope it works for you. more info.