Ember-CLI without Ember Data, use plain ember object instead

Question

I use Ember-CLI to build my ember application, but I don't want to use Ember Data.

By default, when you type this command: ember generate model Person, ember-cli would create a js file under models named "person.js", and it will be a DS.extend(...). I don't want that, I want a plain ember object. So... I delete the person.js and create manually a js file named models.js (that's where I'm going to declare all my ember objects).

Here's what I have in models.js:

import Ember from "ember";

App.Person = Ember.Object.extend({
  helloWorld: function() {
    alert("Hi, my name is " + this.get('name'));
  }
});

I have checked that "App" is available (there's a var named App declared in app.js -- generated by EmberCLI -- and it is exported).

So... now... I want to use it from my Route. I have something like this (in a js file named person.js under "routes"):

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return App.Person.create({
      name: "Tom Dale"
    });
  }
});

Well... it doesn't work. The console says: Error while processing route: person.index App is not defined ReferenceError: App is not defined.

Ok... I checked the generated js file (myproject.js): I found this:

define('infoleccion2015/tests/models/models.jshint', function () {

  'use strict';

  module('JSHint - models');
  test('models/models.js should pass jshint', function() { 
    ok(false, 'models/models.js should pass jshint.\nmodels/models.js: line 3, col 1, \'App\' is not defined.\n\n1 error'); 
  });

});

Turns out that "App" is not recognized anywhere (not even from models.js).

I'm new to EmberCLI. Can someone tell me what to do here? It's a strict requirement that we can't use Ember-Data.

Thanks!

---

Addition:

Thanks Daniel and Buck for the prompt reply, I've checked them and it works.

I'm still stubborn though, trying to put all the object definition in one single js file (models.js)... and I now I found out how.

First, you can create a js file, let's name it models.js. You don't have to put it under models/ directory; you can put it directly under app/.

Here's sample content of models.js:

import Ember from "ember";

var Estado = Ember.Object.extend({
  describe: function() {
    return "Hi, the estado is " + this.get("idEstado");
  }.property("idEstado")
});

var Distrito = Ember.Object.extend({
  describe: function() {
    return "Hi, the distrito is " + this.get("idDistrito");
  }.property("idDistrito")
});

var models = {
  Estado: Estado,
  Distrito: Distrito
};

export default models;

Then, in your Route javascript, you can use it this way:

import models from '../models';

export default Ember.Route.extend({
  model: function() {
    return models.Estado.findAll();
  }
});

Just an alternative, in case you think having separate js file for each domain-model overkill for your project.

Thanks!

Answer 1

The App.Person thing is a relic of globals-based Ember applications, which no longer apply in the Ember CLI world. Ember CLI uses the directory structure to look up the parts of your application when they’re needed.

Change your model to this:

import Ember from 'ember';

export default Ember.Object.extend({
  helloWorld: function() {
    alert("Hi, my name is " + this.get('name'));
  }
});

In the route file, import and use the model class:

import Ember from 'ember';
import Person from '../models/person';

export default Ember.Route.extend({
  model: function() {
    return Person.create({
      name: "Tom Dale"
    });
  }
});

If you’re not using Ember Data, you might as well just remove it. As it suggests in the documentation, run this:

npm rm ember-data --save-dev

Answer 2

First of all, don't use App. in Ember CLI. You use CLI and imports/exports to separate modules and you shouldn't access global App variable - even if it's defined.

I delete the person.js and create manually a js file named models.js (that's where I'm going to declare all my ember objects

I'm not sure if it's possible. You should separate EVERY object. One object - one file. Similiar to controllers, routes etc. So, instead of using one file - models.js, in app/models directory create file for your Person object - person.js. File app/models/person.js should contain:

import Ember from "ember";

var Person = Ember.Object.extend({
  helloWorld: function() {
    alert("Hi, my name is " + this.get('name'));
  }
});

export default Person;

Then, in your route you have to import this object so you can use it:

import Ember from 'ember';
import Person from './../models/person';
# I'm not sure if this is correct path - if it produces an error try adding more .. until it works - I' don't know where your route is located

export default Ember.Route.extend({
  model: function() {
    return Person.create({
      name: "Tom Dale"
    });
  }
});