Ember: model not being set by store in model hook route

Question

So what I am doing is extremely basic: rendering model data to the template. Upon setting the model hook, the {{model}} object doesn't show data in the corresponding template. Here's my code:

contact (route):

user: Ember.inject.service('current-user'),

    model: function()
    {
        // var that = this;
        // console.log('whats being returned bitch: ', this.store.findRecord('contact', this.get('user').contactID));
        //return this.store.findRecord('contact', this.get('user').contactID);
        var records = this.store.findRecord('contact', this.get('user').contactID);
        var promise = Ember.RSVP.defer();
        // console.log('promise', promise.resolve());
        // records.addObserver('isLoaded', function() {
        //  // console.log('records.getv', records);

            promise.resolve(records);
        //});
        return promise;
    }, 
    setupController: function(controller)
    {
       // Get the parameters for the current route every time as they might change from one record to another
       var params = this.paramsFor('dashboard.contact');
       console.log('params', params);
       // Set the data in the current instance of the object, this is required. Unless this is done the route will display the same data every time
       this.module = Ember.String.capitalize(params.module);

       this.id = params.id;
       this.data = this.store.find(this.module,this.id);

       // Set the data in the controller so that any data bound in the view can get re-rendered
       controller.set('id',this.id);
       controller.set('model',this.data);
       controller.set('module',this.module);
     }
});

First i was trying just this but it was not displaying data, then i tried deferring the promise and resolving it (like this) and finally i tried setting up the controller (setupController function) but that didn't work either since params is empty for some reason :/

contact(template):

<h1> Contact! </h1>
{{#each model as |contact|}}
    <h3>{{contact.name}}</h3>    
    <h3>{{contact.password_c}}</h3>
{{/each}}

contact(model):

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  password_c: DS.attr('string'),
  birthdate: DS.attr('string'),
  assistant: DS.attr('string'),
  account_name: DS.attr('string'),
  email1: DS.attr('string'),
  facebook: DS.attr('string'),
  phone_home:DS.attr('string')
  // address: Ember.computed('primary_address_street', 'primary_address_state', 
     //     'primary_address_city', 'primary_address_country', function() {
     //    return '${this.get('primary_address_street')} ${this.get('primary_address_state')} ${this.get('primary_address_city')} ${this.get('primary_address_country')}';
    // })
});

Please help!

You want to show contacts but in setupController returns something else. Also you need to use set get methods to set/get. Also all model(s) should be fetched in model hook. setupController is not a good place for fetching data. model hook has params parameter too — Ebrahim Pasbani

Majid Majid · Accepted Answer · 2016-09-08T12:21:56

Let's assume this is your router

// app/router.js
import Ember from 'ember';  

var Router = Ember.Router.extend({  

});

Router.map(function() {  
  this.route('contacts', {path: '/contacts/:contact_id'});
});

export default Router;

and your model

// app/models/contact.js

import DS from 'ember-data';

export default DS.Model.extend({  
    name: DS.attr('string'),
    password_c: DS.attr('string'),
});

then this is would be your contacts.js route it will have a very important role and We'll be using Ember Data's findRecord to retrieve an individual record from the data store.

// app/routes/contacts.js
import Ember from 'ember';

export default Ember.Route.extend({  
    model(param){
        return this.store.findRecord('contact',param.contact_id);
    }
});

note: this param is very important.The param is passed from the URL into the model. This posts model has an id that can be accessed via contact_id. It uses that id to look up the record so it can be returned. By default the template with the same name, contacts, will have access to this model.

Here we use Ember Data's findAll. This simply returns back all the records in the post data store.

// app/routes/application.js
import Ember from 'ember';

export default Ember.Route.extend({  
    model() {
        return this.store.findAll('contact');
    }
});

now

 // app/templates/application.hbs
{{#each model as |contact|}}
    <h3>{{contact.name}}</h3>    
    <h3>{{contact.password_c}}</h3>
{{/each}}

As I don't have access to see your service and all your code I tried to simplify the way you can return all contact and get that and also how you can pass Param easily.

for more information : https://guides.emberjs.com/v2.7.0/tutorial/ember-data/

You can follow this codes and customize as you would like, I hope it will resolve your problem.

UPDATE:

If you have already your user data and it's ok, then remove {{#each}} and let's have {{contact.name}}, that should work, you just need #each while you have all contact like this.store.findAll('contact'); or if you are in you must have this {{model.name}}, then model would be contact !

Ember: model not being set by store in model hook route

1 Answers