ember-domain

A utility for detecting the active route and domain properties in Ember.js.

Usage

Installation

ember install @abcum/ember-domain

Introduction

The ember-domain addon enables responding to changes to the current ember.js route, and the detection and tracking of changes to the window.location object. This enables customisation of behaviour and styling depending on the current route or domain path.

The current ember.js route is attached to the html body, enabling css styling based on detection of the body attr, whilst the full domain object is made available inside all routes, controllers, and components.

Examples

Displaying the current url.

{{domain.href}}

Using the current route info inside css stylesheets.

body[route="posts.index"] div {
    /* Custom styles for the 'posts.index' route */
}
body[route=^"posts.post"] div {
    /* Custom styles for the 'posts.post.*' routes */
}

Using the current route info inside an Ember controller.

export default Ember.Controller.extend({
    breadcrumb: Ember.computed('domain.route', function() {
        // Do something with the current route
        return this.get('domain.route').split('.');
    })
})

Using the current route info inside handlebars templates.

<div class="menu">
    <li class="{{if (eq domain.route 'posts.index') 'selected'}}">
        Posts
    </li>
    <li class="{{if (eq domain.route 'users.index') 'selected'}}">
        Users
    </li>
    <li class="{{if (eq domain.route 'settings.index') 'selected'}}">
        Settings
    </li>
</div>

Properties

The following properties are available.

Object property	Example output
domain.route	posts.post.index
domain.full	window.location ...
domain.href	http://localhost:4200/posts/123?sort=true#test
domain.host	localhost
domain.port	4200
domain.path	/posts/123
domain.vars	?sort=true
domain.hash	test

Development

• make install (install bower and ember-cli dependencies)
• make upgrade (upgrade ember-cli to the specified version)
• make tests (run all tests defined in the package)