如何将数据从控制器中的动作传递到 Ember 中的把手模板

Question

我的 application.js 控制器有用于发送 POST 请求的 @actions，我想从这些操作之一中获取 json 负载响应，并在名为 application.hbs 的 .hbs 文件中使用该 json 负载。

@action async myFunctionn() {
    let response = await fetch(url, {
        method: 'POST',
        headers:{'Content-Type':'application/vnd.api+json'},
    },
    body:JSON.stringify(payload)});

    let json = await response.json();
    return;


}

我怎么能最简单地做到这一点。

Answer 1

您应该将通过该网络请求获取的数据设置为组件类上的一个属性，而不是在模板中使用：

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default MyComponent extends Component {
  @tracked posts;

  @action
  async loadPosts() {
    let response = await fetch('http://examples.com/posts');
    let payload = await response.json();
    this.posts = payload.data;
  }
}

<button {{on "click" this.loadPosts}}>load posts</button>

{{#each this.posts as |post|}}
  <article>
    <h1>{{post.title}}</h1>
    <p>{{post.body}}</p>
  </article>
{{/if}}