jeudi 19 février 2015

Ember CLI - RESTAdapter for 3rd party API

I can get data into my app with ic.ajax, but it seems like I should be using the RESTAdapter. The explanations are so simplified, that I'm not sure what to do in various cases. This is what I think should work: (and does with fixtures, a local express server, and http-mocks)


I'm going to use tumblr as the example - since it's always been friendly API in general.




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;




routes/post.js



import Ember from 'ember';

export default Ember.Route.extend({

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

});


So, as far as I can tell - find() is some magic ajax call... but what if I want to specify jsonp or something?




adapters/post.js



import DS from 'ember-data';

var tumblrBlogName = 'feministlibraryonwheels'; // friends site
var tumblrApiKey = 'UbB4p0GxqNa6wUa8VwpIdqtywjIiA6vljZXyI9wkx9hnQnAFyk';
var tumblrRequestUrl = 'http://ift.tt/1lEddIw' + tumblrBlogName + '.tumblr.com' + '/posts?api_key=' + tumblrApiKey;

export default DS.RESTAdapter.extend({

host: tumblrRequestUrl

});


This is a little whacky, because the long tumblr endpoint-thing is so squirly - I feel like it should just be http://api.tumblr.com and maybe there is another way to specify the other stuff... or does it just somehow know... very confused... seems like namespace: 'v2' is what that option would be for...




templates/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>


Then this {{#each}} just knows what it's supposed to look for in most cases - but I would like to be explicit.






In all the tutorials I've seen, it's a local server - or http-mocks - and it's just something like this:



import DS from 'ember-data';

export default DS.RESTAdapter.extend({

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

});


Then on top of this - I get what seems like a cors issue GET http://ift.tt/1AbLx7h 401 (Not Authorized)


and it's not like it's really hidden... http://ift.tt/1CRIYHb


What is the missing link between many quick tutorials - and the RESTAdapter in the real world - with real API's ??? Any direction will be very appreciated.


Also, here is some ic.ajax() attempts I was making as well. The payload gets to the console - but it gets foggy when trying to get the data into the templates



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

export default Ember.Route.extend({

model: function() {
var libraryData = ajax({
url: 'http://ift.tt/1AbLyry',
type: 'get',
dataType: 'jsonp'
});
console.log(libraryData);
return libraryData;
}

});




Aucun commentaire:

Enregistrer un commentaire