什么是Ember.Service

Ember Service 是一個單例對象類，他存在于Ember Application 的整個運(yùn)行期．
我們該如何使用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)建了一個簡單的項(xià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和一個函數(shù)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中的函數(shù)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
};

上面的函數(shù)使得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}}

效果如下：

參考文章

Ember Services Tutorial