Question

我是EmberJs的新人。

我尝试从“发票清单”组件链接到发票。

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

让我首先举例说明如何使用Link-to

假设这是你的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>

所以在你的情况下这是Route

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.

从组件中嵌入链接

1 个答案: