Can't load JSON API data with Ember Data

1

I’m following along Ryan Florence’s ember101 #8 ember data screencast and am trying to build a Hacker News client that reads an API. But I’m stuck somewhere and can’t quite figure it out. Desperately trying to get a hold of Ember Data instead of using plain ole’ ajax.

Here’s the jsbin: http://jsbin.com/OFeCoR/2/edit?html,js,output

This is the JSON API: http://node-hnapi.herokuapp.com/news

Codes

var App = Ember.Application.create();

App.Store = DS.Store.extend({
  revision: 12,
  adapter: DS.RESTAdapter.create({
    url: 'http://node-hnapi.herokuapp.com/'
  })
});

App.News = DS.Model.extend({
  title: DS.attr('string'),
  url: DS.attr('string'),
  user: DS.attr('string'),
  timeAgo: DS.attr('string'),
  points: DS.attr('number'),
  commentsCount: DS.attr('number') 
});

App.Router.map(function() {
  this.resource('news', {path: '/news/:news_id'});
});

App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    return App.News.find();
  }
});

Views

  <script type="text/x-handlebars">
  <div class="pure-g-r content" id="layout">
    <div class="pure-g-r" id="list">  
        <ul>
            {{#each controller}}
              <div class="news-item pure-g">
                <div class="pure-g">
                    <div class="pure-u-1-5">
                        <div class="stats">
                          <div class="news-points">45</div>
                          <h3>Points</h3>
                        </div>
                    </div>
                    <div class="pure-u-4-5">
                      {{#linkTo "item" this}}
                      <h5 class="news-name">by {{user}}</h5>
                      {{/linkTo}}
                      <h4 class="news-subject">{{title}}</h4>
                      <p class="news-comments">{{commentsCount}} comments</p>
                    </div>
                </div>
              </div>
            {{/each}}
        </ul>
    </div>  

  <div id="content">
    {{outlet}}
  </div>
  </script>
  
  <script type="text/x-handlebars" id="index">
  <div class="news-content pure-u-1">
    <div class="news-content-header pure-g-r">
        <div class="pure-u-1-2">
            <h1 class="news-content-title">Hamster News</h1>
            <p class="news-content-subtitle">
                A little Hacker News reader built with Ember and PureCSS.
            </p>
        </div>
        <div class="pure-u-1-2 news-content-controls">
            <button class="pure-button secondary-button">View Comments</button>
        </div>
    </div>  
  </script>

  <script type="text/x-handlebars" id="news">
  <div class="news-content pure-u-1">
    <div class="news-content-header pure-g-r">
        <div class="pure-u-1-2">
            <h1 class="news-content-title">{{title}}</h1>
            <p class="news-content-subtitle">
                Posted by <a>{{user}}</a> at <span>{{timeAgo}}</span>
            </p>
        </div>
        <div class="pure-u-1-2 news-content-controls">
            <button class="pure-button secondary-button">View Comments</button>
        </div>
    </div>
  
    <div class="news-content-body">
      {{url}} ~ will be iframe
    </div>
  </div>  
  </script>

P.S. - I know this is using an older version of Ember and Ember-Data. I’ll move up to 1.0 once I sort this out.

2

Here’s the first clue,

Looks like something isn’t configured correctly. I think this sort of stuff is more for stack overflow though. I can help you figure it out over there if you’d like.

edit: Thats the pluralizer. Your model is called “News”, so it’s adding an extra ‘s’ in there. You’re going to have to customize the model’s adapter to get it to work correctly.

4

Thanks @ulisesrmzroche . I stuck this on stackoverflow. Looks like I need to dig in to pluralizing.