Ember CLI - 适用于第三方API的RESTAdapter

she*_*rek 5 javascript tumblr ember.js ember-data ember-cli

我可以使用ic.ajax将数据导入我的应用程序,但似乎我应该使用RESTAdapter.解释如此简化,我不确定在各种情况下该怎么做.这是我认为应该工作的:(和固定装置,本地快递服务器和http-mocks一样)

我将使用tumblr作为示例 - 因为它总是一直是友好的API.

router.js

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {

  // tumblr posts
  this.resource('posts', {
    path: '/tumblr'
  });

});

export default Router;
Run Code Online (Sandbox Code Playgroud)

路线/ post.js

import Ember from 'ember';

export default Ember.Route.extend({

  model: function() {
    return this.store.find('post');
  }

});
Run Code Online (Sandbox Code Playgroud)

所以,据我所知 - find()是一个神奇的 ajax调用...但是如果我想指定jsonp或者其他什么呢?

适配器/ post.js

import DS from 'ember-data';

var tumblrBlogName = 'feministlibraryonwheels'; // friends site
var tumblrApiKey = 'UbB4p0GxqNa6wUa8VwpIdqtywjIiA6vljZXyI9wkx9hnQnAFyk';
var tumblrRequestUrl = 'http://api.tumblr.com/v2/blog/' + tumblrBlogName + '.tumblr.com' + '/posts?api_key=' + tumblrApiKey;

export default DS.RESTAdapter.extend({

  host: tumblrRequestUrl

});
Run Code Online (Sandbox Code Playgroud)

这有点令人讨厌,因为长时间的tumblr端点事情是如此狡猾 - 我觉得它应该只是http://api.tumblr.com并且可能有另一种方式来指定其他东西......或者它只是以某种方式知道 ......非常困惑. ..看起来像名称空间:'v2'是该选项的用途......

模板/ posts.hbs

<section class='container stage'>
<div class='inner-w'>

    <h2>tumblr posts</h2>

    <ul class='block-list event-list'>
        {{#each}}
            <li>
                {{title}}
            </li>

        {{else}}
            No posts are coming up... what's up with that?
        {{/each}}
    </ul>

</div>
</section>
Run Code Online (Sandbox Code Playgroud)

然后这只{{#each}}知道在大多数情况下它应该寻找什么 - 但我想明确.


在我看过的所有教程中,它是一个本地服务器 - 或者是http-mocks - 它就是这样的:

import DS from 'ember-data';

export default DS.RESTAdapter.extend({

  host: 'localhoststuff:3000',
  namespace: 'api'

});
Run Code Online (Sandbox Code Playgroud)

然后在此之上 - 我得到的似乎是一个cors问题 GET http://api.tumblr.com/v2/blog/feministlibraryonwheels.tumblr.com/posts?api_key=UbB4p0GxqNa6wUa8VwpIdqtywjIiA6vljZXyI9wkx9hnQnAFyk/posts 401 (Not Authorized)

并且它不像它真的隐藏... [ http://api.tumblr.com/v2/blog/feministlibraryonwheels.tumblr.com/posts?api_key=UbB4p0GxqNa6wUa8VwpIdqtywjIiA6vljZXyI9wkx9hnQnAFyk][1]

许多快速教程 - 和现实世界中的RESTAdapter - 之间缺少什么是真正的API?任何方向都将非常感激.

此外,这里也有一些ic.ajax()尝试.有效负载进入控制台 - 但在尝试将数据导入模板时会变得模糊

import Ember from 'ember';
import ajax from 'ic-ajax';

export default Ember.Route.extend({

  model: function() {
    var libraryData = ajax({
      url: 'http://www.librarything.com/api_getdata.php?userid=F.L.O.W.&showstructure=1&showTags=1&booksort=title_REV',
      type: 'get',
      dataType: 'jsonp'
    });
    console.log(libraryData);
    return libraryData;
  }

});
Run Code Online (Sandbox Code Playgroud)



编辑:2.4文档非常棒.Ember数据稳定.如果它不是JSON API格式,您需要知道您获得的JSON类型,然后您需要序列化数据并将其转换为该格式.

Kor*_*oys 0

tumblr 虽然看起来是一个友好的 api,但对 Ember 来说并不是那么友好。Ember Data 需要一个非常具体的 json 格式,如果响应不匹配,它看起来不会像许多简化的教程那样“神奇”或“正常工作”。

查找功能:没那么神奇

您走在正确的道路上(定义自定义适配器)。您可能会考虑在适配器内覆盖 buildURL。

请阅读此处此处,了解有关如何将传入的 json 转换为 Ember 喜欢的表单的更多详细信息。

如果你放一个 jsbin 我可以看一下。