ember 来自组件的链接

Question

我是 EmberJs 的新手。

我尝试从组件“发票列表”链接到发票。

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' });
});

我的问题是，模板不会渲染，我收到错误：“props.parentView.appendChild 不是函数”

怎么了？

感谢您的帮助。 费边

Answer 1

让我先给你一个例子如何使用链接到

假设这是你的 Route.js

Router.map(function() {
  this.route('photos', function(){
    this.route('edit', { path: '/:photo_id' });
  });
});

这是 app/templates/photos.hbs

<ul>
  {{#each photos as |photo|}}
    <li>{{#link-to "photos.edit" photo}}{{photo.title}}{{/link-to}}</li>
  {{/each}}
</ul>

然后呈现的 HTML 将是

<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>

所以在你的情况下这是路线

Router.map(function() {
  this.route('invoices');
  this.route('invoice', { path: '/invoice/:invoice_id' });
});

那么你可以使用这个

{{#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}}

另一个需要澄清的例子：

//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}} 

希望它对你有用。 more info.