Ember data single data extract through browser URL

Question

Getting all articles is ok, but when try to retrieve just one article through route url directly, system error - undefined

var articles = Ember.$.getJSON('http://localhost/emberdata/api/articles');

will return:

[{"articles":
   [
     {
        "id":1,
        "title":"Ember is the best",
        "author":"brk","excerpt":"Programming is awesome"
     },
     {
        "id":2,
        "title":"Backbone not a framework",
        "author":"krb",
        "excerpt":"Server-side controller sucks"
     },
     {
        "id":3,
        "title":"Javascript pwned",
        "author":"rbk",
        "excerpt":"I know right"
     }
  ]
}]

API is created using PHP Slim Rest API

this Route working find, showing all the data in the handlebar template

App.ArticlesRoute = Ember.Route.extend({
   model: function() {
      return articles;
   }
});

However for child view routing, undefined is returned

App.ArticleRoute = Ember.Route.extend({
   model: function(params) {
      var article = articles.findBy('id', params.article_id);
      console.log(article);
      return article;
   }
});

Directly invoking the child view URL is not working:

http://localhost/emberdata/#/articles/1

However clicking the link of articles, those child view route works:

this.resource('article', { path: ':article_id' });

This is the error:

enter image description here

Bavo Van Geit Bavo Van Geit · Accepted Answer · 2014-08-24T15:35:56

Ember.$.getJSON() will return a promise (see: http://emberjs.com/api/classes/Ember.PromiseProxyMixin.html). You can't call the findBy() method on a promise.

That being said, you're making it yourself very difficult. I recommend to start using the DS.RESTAdapter. In your case it would be something like this:

App.ApplicationAdapter = DS.RESTAdapter.extend({
    namespace: 'emberdata/api'
});

then clear (or remove) ArticlesRoute because you will use convention (instead of configuration):

App.ArticlesRoute = Ember.Route.extend({
});

idem for ArticleRoute. Except, if your backend doesn't support calls like /emberdata/api/article/1 use the following code:

App.ArticleRoute = Ember.Route.extend({
   model: function(params) {
      var article = this.store.find('article').findBy('id', params.article_id);
      console.log(article);
      return article;
   }
});

Ember data single data extract through browser URL

1 Answers