如何从Ember入门套件中显示简单的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