how to use ember.js for accessing data through rest adapter and pass it to template

Question

I have recently started learning ember.js and facing some problem in rest adapter. My code is like this

   App = Ember.Application.create();

App.Router.map(function() {
  this.resource('about');
  this.resource('posts');
  });

App.Posts = DS.Model.extend({
  response: DS.attr('string')
});  


App.Store = DS.Store.extend({
  revision: 12,
  adapter: DS.RESTAdapter.create({
  namespace: '89/gz/connectweb/timeliner/js/data.json',
    host: 'http://local_env.mhhe.com'
  })
});

App.PostsRoute = Ember.Route.extend({
model: function (posts) {
  var jsondata =  this.store.find(posts);

    return jsondata;
  }


});

App.PostsView = Ember.View.extend({
  didInsertElement : function(){
   // this._super();
    var jsondata = $('#restdata').html();   
    var s_date = jsondata.split("</script>");
    var final_data = s_date[1].split("<script");    
    var jsonarray = JSON.parse(final_data[0]);
    console.log(jsonarray);
    timeLineData(jsonarray)
    // perform your jQuery logic here
  }
});

i have edited by code. In this i am successfully able to hin the url and get data in response if i check this by doing inspect element but now this data is not getting accessed in route. I just want to know atleast whats wrong here .

score 0 · Answer 1 · answered Nov 05 '14 at 14:05

Ember expects data in a json specific format
Given the following models:

App.Post = DS.Model.extend({
  title:    DS.attr(),
  comments: DS.hasMany('comment'),
  user:     DS.belongsTo('user')
});

App.Comment = DS.Model.extend({
  body: DS.attr()
});

Ember Data expects that a GET request to /posts/1 would return the JSON in the following format:

{
  "post": {
    "id": 1,
    "title": "Rails is omakase",
    "comments": ["1", "2"],
    "user" : "dhh"
  },

  "comments": [{
    "id": "1",
    "body": "Rails is unagi"
  }, {
    "id": "2",
    "body": "Omakase O_o"
  }]
}

If your data is not in this format, which by the looks of your code it is not, then you need to format it. You can find out how to do that here.
Alternatively you can look into using ember without ember data like this blog post.

score 0 · Answer 2 · answered Nov 05 '14 at 14:05

0

First problem I see here, is your adapter configuration. when you call this.store.find('post'); with your current configuration, it will make a call to:

http://local_env.mhhe.com/89/gz/connectweb/timeliner/js/data.json/posts

Seems like you don't have a restfull backend that follows the expected format, so you are better off probably using just jquery rather than Ember Data:

App.PostsRoute = Ember.Route.extend({
  model: function() {
    return Ember.$.getJSON('/89/gz/connectweb/timeliner/js/data.json');
  }
});

Secondly, I don't understand what you are trying to do in the view. the data returned from the service, is already available in the controller, you should be able to use it directly on the template

// views/posts.hbs
<ul>
  {{#each}}
    <li>{{title}}</li>
  {{/each}}
</ul>

answered Nov 05 '14 at 14:05

Asgaroth

4,274
3
20
36

Actually i am able to access data the way you have answered, but i am atrying to learn rest adapter and i would like to know how to do that.I only want to know how to access that rest adapter response in route. if i am missing some methods plz let me know that. – Ranjeet SIngh Nov 05 '14 at 14:28
hey can you tell me how to call this route at regular interval. In normal ajax call i have used settimeout function to call the method which contains this ajax call but how to call route? – Ranjeet SIngh Nov 07 '14 at 08:02
@RanjeetSIngh take a look at this answer http://stackoverflow.com/questions/21708931/how-to-update-embers-model-periodically-such-as-in-setinterval – Asgaroth Nov 07 '14 at 13:42

how to use ember.js for accessing data through rest adapter and pass it to template

2 Answers2