How to show simple REST data in from Ember starter kit? - rest

Question

I downloaded the ember starter kit and want to show a simple REST API data to see how Ember works.
From videos and tutorials I found that there is a model hook that can be used to inject data.
So I did the following:
App.Router = Ember.Router.extend({
model: function ({
return $.getJSON("https://api.foursquare.com/v2/users/self?oauth_token=TOKENHERE&v=20130723");
}),
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/'
})
})
})
And added the following in my index.html
<script type="text/x-handlebars" data-template-name="application">
{{title}}
</script>
However, this didn't work. When I go to index.html I don't see anything there. Additionally, under Network tab of Inspect Element, I don't see any network requests being made to the REST API.
What am I doing wrong? Also, for sample purpose I would simply like to have a data.json json file that will contain some json data. However, I read that Ember lacks support to read a file, thats why I'm trying a sample rest api provided by foursquare.
Is there a way to read a json file using ember? I'm running this simply on my browser without a server.

Answer 1

That looks like it should work. Here is an example using a different API but using the same structure:
JavaScript:
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return $.getJSON("https://api.github.com/repos/emberjs/ember.js/stats/contributors");
}
});
Templates:
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
Ember.js repository contributors
<ul>
{{#each user in controller}}
<li>{{user.author.login}}</li>
{{/each}}
</ul>
</script>
JSBin example