如何將數據從控制器中的動作傳遞到 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}}