什么是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
以上創(chuàng)建了一個簡單的項目，包含一個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";
}
});
上面我們創(chuàng)建了一個service 其中包含一個屬性isAuthenticated和一個函數thisistest返回一個字符串
下面我們創(chuàng)建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);
}
}
});
上面我們創(chuàng)建一個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中使用可以創(chuàng)建以下文件
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}}
效果如下：
