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

Question

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

app/控制器/随机文本.app

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对象。我可以在选项卡中看到它。

这是我的应用程序/模板/随机文本.

 <h1>Random Text</h1>

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

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

Answer 1

您将从操作处理程序中返回；但这不会将任何内容呈现到屏幕上。您需要将模板绑定到javascript文件。请参阅下面的转盘。我在application.hbs中声明了application.hbs。这将绑定到randomText控制器中的application.js属性。最初它是未定义的，因此不呈现文本。当您按下按钮时，application.js中的动作处理程序将运行。在操作处理程序中；远程调用返回的数据被设置为具有Ember.String.htmlSafe函数(将返回的字符串格式化为html)的Ember.String.htmlSafe属性。您可以直接将controller中声明的属性绑定到相应的template。如果使用route而不是controller，则必须使用model钩子。我强烈建议您查看官方的余烬指南并在那里浏览教程。

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}} .