How to access Ember Model from the Route in Ember CLI

Question

Perhaps doing this with regular Ember application having all the code sitting in app.js would have been much easier for me. But since I'm using Ember CLI I'm having trouble accessing my model in my Route. I'm still trying to learn how to use Ember CLI so please help me out.

As I just want to fire AJAX calls and get the data to render on my UI, I downloaded and added Ember Model library to my project. I don't see a need of using Ember Data. This is the Ember Model documentation I'm referring: https://github.com/ebryn/ember-model#example-usage. With that said, here's my directory structure that Ember CLI proposed:

|-app    
  |-controllers
  | |-customers.js
  |-models    
  | |-customers.js
  |-routes    
  | |-customers.js
  |-templates    
  | |-customers.hbs
  |-app.js
  |-index.html
  |-main.js
  |-router.js

This is much simpler representation of the actual project structure that I have just to focus on the problem. As proposed in Ember Model documentation I added following code to my Customers model (model\customers.js):

export default Ember.Model.extend({
    nameid: attr(),
    firstname: attr(),
    middlename: attr(),
    lastname: attr(),        
    prefixname: attr(),
    suffixname: attr()
});

this.url = "http://restapi/api/customers";
this.adapter = Ember.RESTAdapter.create();

Notice that I had to do the "export default" instead of "App.Customers = Ember.Model.extend...". This is the Ember CLI convention. So when I try to access the model I created in my Customers Route I get error "Error while loading route: ReferenceError: App is not defined"..

Customers Route code:

export default Ember.Route.extend({
    model: function () {
        App.Customers.find();
    },

    actions: {
        addnew: function(){
            //logic of saving edited customer
            alert('customer created!');
        }
    }
});

I tried this.model() - Returns an object of type supperWrapper and this.modelFor() - Returns null.

Please suggest how to get an handle of my model in its route so that I can perform CRUD operations provided out-of-the-box by Ember Model.

Thanks!

Answer 1

I suggest you change the file name of the model to singular e.g. customer.js.

If you want to access the model class within the route file you have to import the model. Since Ember CLI uses ES6 module syntax you can't / shouldn't access anything directly on the App object. This should be done via import statements or Ember internally via the resolver.

import Customer from "../models/customer";

Now you can use it in the model hook. There is also another error in your example code, you have to return the promise from the find call.

model: function () {
  return Customer.find();
},

I'm curious why you picked Ember Model over Ember Data, because for this example you would need less code with Ember Data and it would be more like the Ember way AFAIK.