Search code examples
ember.jscoffeescriptember-app-kit

Coffeescript and defining Ember objects


I am currently learning Ember with Ember App Kit and Coffeescript.

there is some specific escaping that needs to be used in coffeescript to allow the ES6 Resolver to work properly.

Essentially to define an object i must wrap it in a variable.

NewObject = Ember.Object.extend({
  //....code...
});

`export default NewObject`

However, how can I define something like an index controller (like in a nested directory)?

Normally I think you just name the file index.js.... but in coffeescript if i need to wrap it in a variable, should that variable just be called index as well?

I'm still new to ember and coffeescript both.


Solution

  • Assuming you aren't talking about a route/controller, yes, you can just name it in that fashion.

    Rather than use AMD (Require.js) or CommonJS (Browserify) modules, apps built using Ember CLI use ES6 modules through the ES6 module transpiler. This means that you can build your apps using syntax from future JavaScript versions, but output AMD modules that can be used by existing JavaScript libraries today.

    If you've built Ember.js apps before, you’re probably used to stuffing everything into a global namespace, following naming conventions so the app can automatically resolve its dependencies: App.FooRoute would know to render App.FooView by default. Using the custom resolver, Ember CLI applications have similar abilities, but using ES6 modules instead of a global namespace.

    For example, this route definition in app/routes/index.js:

    var IndexRoute = Ember.Route.extend({    
      model: function() {
       return ['red', 'yellow', 'blue'];    
      }  
    });
    export default IndexRoute; 
    

    Would result in a module called routes/index. Using the resolver, when Ember looks up the index route, it will find this module and use the object that it exports.

    You can also export directly, i.e., without having to declare a variable:

    export default Ember.Route.extend({    
      model: function() {
        return ['red', 'yellow', 'blue'];    
      }  
    });