Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
259 lines (188 sloc) 6 KB
layout title permalink category github
post
Naming Conventions
naming-conventions
user-guide

Overview

  • kebab-case
    • file names
    • directory names
    • html tags/ember components
    • CSS classes
    • URLs
  • camelCase
    • JavaScript
    • JSON

When using Ember CLI it's important to keep in mind that the Resolver changes some of the naming conventions you would typically use out of the box with Ember, Ember Data and Handlebars. In this section we review some of these naming conventions.

Module Examples

Adapters

{% highlight javascript %} // app/adapters/application.js import Ember from "ember"; import DS from "ember-data";

export default DS.RESTAdapter.extend({}); {% endhighlight %}

Components

{% highlight javascript %} // app/components/time-input.js import Ember from "ember";

export default Ember.TextField.extend({}); {% endhighlight %}

Controllers

{% highlight javascript %} // app/controllers/stop-watch.js import Ember from "ember";

export default Ember.Controller.extend({}); {% endhighlight %}

And if it's a nested controller, we can declare nested/child controllers like such: app/controllers/posts/index.js.

Helpers

{% highlight javascript %} // app/helpers/format-time.js import Ember from "ember";

export default Ember.Helper.helper(function(){}); {% endhighlight %}

Initializers

{% highlight javascript %} // app/initializers/observation.js export default { name: 'observation', initialize: function() { // code } }; {% endhighlight %}

Note: initializers are loaded automatically.

Mixins

{% highlight javascript %} // app/mixins/evented.js import Ember from "ember";

export default Ember.Mixin.create({}); {% endhighlight %}

Models

{% highlight javascript %} // app/models/observation.js import DS from "ember-data";

export default DS.Model.extend({}); {% endhighlight %}

Routes

{% highlight javascript %} // app/routes/timer.js import Ember from "ember";

export default Ember.Route.extend({}); {% endhighlight %}

Nested routes as such: app/routes/timer/index.js or app/routes/timer/record.js.

Serializers

{% highlight javascript %} // app/serializers/observation.js import DS from "ember-data";

export default DS.RESTSerializer.extend({}); {% endhighlight %}

Transforms

{% highlight javascript %} // app/transforms/time.js import DS from "ember-data";

export default DS.Transform.extend({}); {% endhighlight %}

Utilities

{% highlight javascript %} // app/utils/my-ajax.js export default function myAjax() {}; {% endhighlight %}

Views

{% highlight html %}

{% raw %}{{view 'stop-watch'}}{% endraw %} {% endhighlight %}

{% highlight javascript %} // app/views/stop-watch.js import Ember from "ember";

export default Ember.View.extend({}); {% endhighlight %}

And views, which can be referenced in sub-directories, but have no inheritance.

{% highlight html %}

{% raw %}{{view 'inputs/time-input'}}{% endraw %} {% endhighlight %}

{% highlight javascript %} // app/views/inputs/time-input.js import Ember from "ember";

export default Ember.TextField.extend({}); {% endhighlight %}

Filenames

It is important to keep in mind that the Resolver uses filenames to create the associations correctly. This helps you by not having to namespace everything yourself. But there are a couple of things you should know.

All filenames should be lowercased

{% highlight javascript %} // models/user.js import Ember from "ember"; export default Ember.Model.extend(); {% endhighlight %}

Dasherized file and directory names are required

{% highlight javascript %} // controllers/sign-up.js import Ember from "ember"; export default Ember.Controller.extend(); {% endhighlight %}

Nested directories

If you prefer to nest your files to better manage your application, you can easily do so.

{% highlight javascript %} // controllers/posts/new.js results in a controller named "controllers.posts/new" import Ember from "ember"; export default Ember.Controller.extend(); {% endhighlight %}

You cannot use paths containing slashes in your templates because Handlebars will translate them back to dots. Simply create an alias like this:

{% highlight javascript %} // controllers/posts.js import Ember from "ember"; export default Ember.Controller.extend({ needs: ['posts/details'], postsDetails: Ember.computed.alias('controllers.posts/details') }); {% endhighlight %}

{% highlight html %} {% raw %}

{{postsDetails.count}} {% endraw %} {% endhighlight %}

Tests

Test filenames should be suffixed with -test.js in order to run.

Pod structure

As your app gets bigger, a feature-driven structure may be better. Splitting your application by functionality/resource would give you more power and control to scale and maintain it. As a default, if the file is not found on the POD structure, the Resolver will look it up within the normal structure.

In this case, you should name the file as its functionality. Given a resource Users, the directory structure would be:

  • app/users/controller.js
  • app/users/route.js
  • app/users/template.hbs

Rather than hold your resource directories on the root of your app you can define a POD path using the attribute podModulePrefix within your environment configs. The POD path should use the following format: {appname}/{poddir}.

{% highlight javascript %} // config/environment.js module.exports = function(environment) { var ENV = { modulePrefix: 'my-new-app', // namespaced directory where resolver will look for your resource files podModulePrefix: 'my-new-app/pods', environment: environment, baseURL: '/', locationType: 'auto' //... };

return ENV; }; {% endhighlight %}

Then your directory structure would be:

  • app/pods/users/controller.js
  • app/pods/users/route.js
  • app/pods/users/template.hbs