Question

我对ember很新，现在我只想调用一个生成随机文本的api，并在页面上显示该文本。我使用的API和具体要点是＆＃34; http://www.randomtext.me/api/lorem/ul-5/5-15＆＃34;它返回一个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应用中的页面上显示响应？

Answer 1

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

Answer 2

您需要在模型挂钩内的app/routes/randomtext.js中发出请求。

model: function() {
 Em.RSVP.Promise.cast(Em.$.getJSON('http://www.randomtext.me/api/lorem/ul-5/5-15')).then((function(_this) {
      return function(data) {
    return Em.Object.create(data);
  };
})(this));
}

setupController: function(controller, model) {
  this._super(controller, model);
 return controller.set('textData', model);
}

之后在app/templates/randomtext.hbs

您可以使用{{#each textData as someText}} <li>This is first item in array {{someText.item}}</li> {{/each}}帮助程序循环遍历数组，或者如果响应是简单对象，并且您只想显示一些对象属性，请执行此操作{{textData.title}} ...

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

2 个答案: