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

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

应用程序/控制器/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开发人员标签中看到它。

这是我的app / templates / randomtext.hbs

 <h1>Random Text</h1>

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

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

最佳答案

您是从动作处理程序中返回的；但这不会在屏幕上呈现任何内容。您需要从模板到javascript文件进行绑定。请参见以下twiddle。我在{{randomText}}中声明了application.hbs。这绑定到randomText控制器中的application.js属性。最初它是未定义的；因此，不会显示任何文本。当您按下按钮时； application.js中的动作处理程序运行。在动作处理程序中；使用randomText函数将远程调用返回的数据设置为Ember.String.htmlSafe属性（将返回的字符串格式化为html）。您可以将controller中声明的属性直接绑定到相应的template。如果使用route代替controller；您必须使用model挂钩。我强烈建议您查看官方Ember Guide并在那里进行教程。