CODEWITHSUNDEEP
templatesember.jsroutescomponents
Fabian M.
Fabian M.

Reputation: 1

ember link-to from the component

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

Upvotes: 0

Views: 1157

Answers (1)

Majid
Majid

Reputation: 2890

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><a href="/photos/1">Happy Kittens</a></li>
  <li><a href="/photos/2">Puppy Running</a></li>
  <li><a href="/photos/3">Mountain Landscape</a></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.

Upvotes: 1

Related Questions