Ember Services 指南　学习笔记

什么是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}}

效果如下：

参考文章

Ember Services Tutorial