javascript - 如何从 JSON XHR 请求获取数据以在我的模板中使用？

Question

我对 ember 很陌生，现在我只想调用一个生成随机文本的 api，并将该文本显示在页面上。我使用的 API 和特定 enpoint 是“http://www.randomtext.me/api/lorem/ul-5/5-15 ”，它返回 JSON 响应。

应用程序/ Controller /randomtext.js

import Ember from 'ember';

export default Ember.Controller.extend({
  ajax: Ember.inject.service(),
  actions: {
    sendRequest() {
      return this.get('ajax').request('http://www.randomtext.me/api/lorem/ul-5/5-15');
    }
  }
});    

这是发出 XHR 请求，并返回正确的 JSON 对象。我可以在 chrome 开发者选项卡中看到它。

这是我的应用程序/模板/randomtext.hbs

 <h1>Random Text</h1>

 <p>test</p><button {{action "sendRequest"}}>testing</button>

按下按钮会发出 xhr 请求，这是可靠的，但我不知道如何获取 json 响应的 text_out 属性，或显示它的任何部分。如何(尽可能简单)向外部 api 端点发出 GET 请求，并在我的 ember 应用程序的页面上显示响应？

Answer 1

您正在从操作处理程序中返回；但这不会在屏幕上呈现任何内容。您需要将模板绑定(bind)到 javascript 文件。请参阅以下twiddle 。我在 application.hbs 中声明了 {{randomText}}。它绑定(bind)到 application.js Controller 中的 randomText 属性。最初它是未定义的；因此不会呈现任何文本。当您按下按钮时； application.js 中的操作处理程序运行。在 Action 处理程序中；从远程调用返回的数据通过 Ember.String.htmlSafe 函数设置为 randomText 属性(将返回的字符串格式化为 html)。您可以直接将controller中声明的属性绑定(bind)到相应的template。如果你使用route而不是controller；您必须使用 model Hook 。强烈推荐你看官方Ember Guide并浏览那里的教程。