@abcum/ember-domaindeprecated

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

Usage no npm install needed!

<script type="module">
  import abcumEmberDomain from 'https://cdn.skypack.dev/@abcum/ember-domain';
</script>

README

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)