Emberjs - 在组件中使用@model hook 数据

Question

我有一条路线可以从 mirage 抓取 posts 数据，如下所示：

import Route from '@ember/routing/route';

export default class PostsRoute extends Route {
  async model() {
    return this.store.findAll('post');
  }
}

然后我可以做这样的事情

{{#each @model as |post idx|}}
   ..do stuff
{{/each}}

但是假设我想将 @model 重命名为 foo 并在其他组件中使用它 - 我该怎么做？

Answer 1

第一个 @model 有点 "magic string" 并且总是引用 this.model。你可以做的是在 Controller:

上定义一个 getter

get foo() {
  return this.model;
}

然后您可以在模板中将其用作 {{this.foo}}。

另一种在路线模板中将 @model 引用为其他内容的方法是使用 {{#let:

{{#let @model as |foo|}}
  {{foo}}
{{/let}}

当您将数据传递给组件时，您始终可以重命名它：

<MyComponent @foo={{@model}} />`

然后用{{@foo}}里面components/my-component.hbs.

Emberjs - 在组件中使用@model hook 数据

Emberjs - use @model hook data in component

ember.js