Ember data from a rest url not rendering

0
votes

I am trying to create an Ember.js application for the first time using a RESTful backend. I have been always been using HTML rendered from my server and hence I am a newbie to ember. I have a query to fetch a restaurant based on owner id and then show the name in the title bar.

LiveKitchen.RestaurantController = Ember.ObjectController.extend({
   needs : 'login'
});

LiveKitchen.RestaurantRoute = Ember.Route.extend({
model: function() {
    console.log(this.controllerFor('login').get('user_id'));
    console.log('Fetching Restaurants ' + this.store.find('restaurant', {owner_id : this.controllerFor('login').get('user_id')}));
    var res =  this.store.find('restaurant', {owner_id : this.controllerFor('login').get('user_id')});
    // restaurant.tables = this.store.find('table', {restaurant_id : restaurant.mongo_id});
    console.log('Restaurant ' + res);
    return res.objectAt(0);
    // return restaurant;
}
});

I have verified the response using the debugger and seen that the json data is returned correctly. However my template 

<script type="text/x-handlebars" data-template-name="restaurant">
     <small>
         <i class="icon-leaf"></i>
         {{name}}
         </small>
</script>

doesn't have the name printed in the page.

Can you please help me on how I can debug this and figure out why the data is not rendering? Since there are no errors, I am not able to find out what step to take next.

2
ember.jsember-data
Is this.store.find('restaurant') returning more than one instance of the restaurant model? – NicholasJohn16
Initially I was returning one restaurant in the form {"restaurant" : { "name" : "SomeName", ...}}, which was not working. So I thought it may be expecting many and started returning {"restaurants" : [{"name" : "SomeName:,...}]} – Manoj
I tried something else. Instead of using owner_id, I used the id of the object and used this.store.find('restaurant', id) and then the name came. Though the data returned for both the cases is the same from the REST API, ember data seems to expect different results? – Manoj

2 Answers

0
votes

The problem may be using objectAt(0), try doing it like this instead:

return res.get('firstObject');
0
votes

Finally figured it out. Thanks for your pointer, I had to do res.get('firstObject'), however not in the model callback, but in the setupController callback. It seems if I use the query like I have, it will get a promise array which cannot be assigned to an object controller. Also since it is a promise, until the promise is fulfilled, the setupController will not be called. So using the setupController callback in the following manner

LiveKitchen.RestaurantRoute = Ember.Route.extend({
model: function() {
    console.log(this.controllerFor('login').get('restaurant_id'));
    console.log('Fetching Restaurants ');
    //var res =  this.store.find('restaurant', this.controllerFor('login').get('restaurant_id'));
    var res = this.store.find('restaurant', {"owner_id" : this.controllerFor('login').get('user_id')});
    console.log('Restaurant ' + res);
    return res;
},
setupController : function(controller, model) {
    console.log('Incoming ' + model.get('firstObject').get('name'));
    controller.set('model', model.get('firstObject'));
}

});

Now it is working. Posting it so that it may help someone else going forward.