@abcum/ember-domain 中文文档教程
ember-domain
用于检测 Ember.js 中的活动路由和域属性的实用程序。
Usage
Installation
ember install @abcum/ember-domain
Introduction
ember-domain 插件可以响应变化 t o 当前的 ember.js 路由，以及对 window.location 对象变化的检测和跟踪。 这允许根据当前路由或域路径自定义行为和样式。
当前的 ember.js 路由附加到 html 主体，启用基于主体属性检测的 css 样式，同时在所有路由、控制器和组件中提供完整的域对象。
Examples
显示当前网址。
{{domain.href}}
在 css 样式表中使用当前路线信息。
body[route="posts.index"] div {
/* Custom styles for the 'posts.index' route */
}
body[route=^"posts.post"] div {
/* Custom styles for the 'posts.post.*' routes */
}
在 Ember 控制器中使用当前路线信息。
export default Ember.Controller.extend({
breadcrumb: Ember.computed('domain.route', function() {
// Do something with the current route
return this.get('domain.route').split('.');
})
})
使用车把模板内的当前路线信息。
<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
以下属性可用。
| 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)
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)
