什么是Ember.Service
Ember Service 是一个单例对象类，他存在于Ember Application 的整个运行期．
我们该如何使用Ember Service,列举以下几种:
- Session Data
- APIs that talk to a server
- WebSockets
- GeoLocation data
- Events pushed from a server
Dependency Injection
Service 可以通过Injection 加入 controller ,routes, templates
Demo
Setup
$ ember new ServiceTest
$ cd ServiceTest
$ ember g service start
$ ember g component comp-test
$ ember g initializer init
以上创建了一个简单的项目，包含一个service ,一个comppnent, 一个initializer
Service
// app/services/start.js
import Ember from 'ember';
export default Ember.Service.extend({
isAuthenticated: true,
thisistest: function() {
return "this is erik";
}
});
上面我们创建了一个service 其中包含一个属性isAuthenticated和一个函数thisistest返回一个字符串
下面我们创建comppnent
Component
// app/components/comp-test.js
import Ember from 'ember';
var inject = Ember.inject;
export default Ember.Component.extend({
start: inject.service(),
message: 'test',
actions: {
pressMe: function() {
var testText = this.get('start').thisistest();
this.set('message',testText);
console.log(this.get('start').isAuthenticated);
}
}
});
上面我们创建一个component,其中使用start: inject.service()的方式注入service在这个component中,
上面注入service的方法必须保证变量名称和service一致,如果不想变量名称和service 一致,还有一种方法可以注入service:
export default Ember.Component.extend({
othername: inject.service('start'),
message: 'test',
actions: {
pressMe: function() {
var testText = this.get('othername').thisistest();
this.set('message',testText);
console.log(this.get('othername').isAuthenticated);
}
}
});
...
注入后就可以在component中使用service中的函数thisistest．
这种方法需要在每个component都注入在能使用．如果需要在所有的component中使用可以创建以下文件
Initializer
// app/initializers/init.js
export function initialize(container, app) {
app.inject('component', 'start', 'service:start');
}
export default {
name: 'init',
initialize: initialize
};
上面的函数使得service:start 注入所有的component中，再使用就不需要额外注入了如下:
// app/components/comp-test.js
import Ember from 'ember';
export default Ember.Component.extend({
message: 'test',
actions: {
pressMe: function() {
var testText = this.get('start').thisistest();
this.set('message',testText);
console.log(this.get('start').isAuthenticated);
}
}
});
Component Template
// app/templates/components/comp-test.hbs
<button {{action "pressMe"}}>push me</button><br>
{{message}}
Application Template
// app/templates/application.hbs
<h2 id="title">Welcome to Service Ember.js</h2>
{{outlet}}
{{comp-test}}
效果如下：
