Ember版本小小結

原文地址：http://120.24.90.140:2368/ember-summer/

  不得不說Ember更新實在是太快了！！如今（2015-11-23）已經更新到2.2.0版本了。隨着版本的升級不少舊版的特性會被聲明爲過是，甚至是棄用，

這對開發者來講是在是痛苦！版本的兼容性問題成爲最大的問題！！

瀏覽器兼容性問題

  官方原文IE8 support has been dropped for Ember 2.0. For the 2.x series, IE9+ will be supported.。

2.0版本開始移除聲明爲過期的特性，削弱控制器controller，着重開發可路由組件。從2.0開始推薦使用組件替代控制器。

2.1版本

  2.1版本在2015年8月16日發佈。

  新引入的特性以下：

1. {{get}}助手

使用實例，獲取對象user的屬性值

{{user.name}}

{{get user "name"}}

詳細使用教程請看ember-get-helper。

2. {{each-in}} 助手

{{each-in}}助手與JavaScript的for (var i in obj) { }有相同的效果。均可以用於遍歷出對象的屬性。

使用實例

<ul>

	{{#each-in user as |key value|}}

		<li>{{key}} : {{value}}</li>

	{{/each-in}}

</ul>

2.2 測試版

這個版本相比2.1版沒有加入任何新的特性，與2.1版幾乎一致。

2.3 版本

2.3版本引入裏新特性，包括以下特性：

1. visit API

這是個用於測試的API，使用實例以下：

import MyApp from 'my-app';



$(function() {

  let App = MyApp.create({ autoboot: false });

  let options = {

    // Prevent this application from updating the URL in the address bar

    location: 'none',

    // Override the default `rootElement` to render into a specific `div`

    // on the page

    rootElement: '#demo'

  };

  App.visit('/demo', options).then((/* appInstance */) => {

    $('#loading').fadeOut(); // Or any other logic after rendering

  });

});

更多詳細介紹，請移步visit API

2. {{hash}} 助手

使用實例。

{{#with (hash name='Bob') as |person|}}

  Hello, my name is {{person.name}}

{{/with}}

次助手一般與{{yield}}結合使用，是的使用上下文組件更加簡便。

{{! app/templates/components/nice-person.hbs }}

{{yield (hash name="Bob" )}}

{{! app/templates/index.hbs  }}

{{#nice-person as |person|}}

	Hello, my name is {{person.name}}

{{/nice-person}}

點擊hash helper查看詳情。

3. 上下文組件

新的上下文組件容許多個組件共享數據，經過組件嵌套，經過屬性傳遞參數。

{{! app/templates/components/alert-box.hbs }}

<div class="alert-box">

	{{yield (hash close-button=(component 'alert-box-button' onclick=(action 'close')) ) }}

</div>

{{ !app/templates/index.hbs }}

{{#alert-box as |box|}}

	<div style="float: right;">

		{{#box.close-button}}

			It's just a plain old meteorite.

		{{/box.close-button}}

	</div>

{{/alert-box}}

201-01-19 繼續更新

Ember Data 2.3版、2.4測試版發佈

發佈時間2016-01-12。

Ember Data 2.3做爲一個全新的、完整的Ember CLI插件。 相比於以前的版本，你須要在項目的package.json和bower.json中分別引入Ember Data插件。

可是這樣的結果致使更新 package.json並不會更新bower.json致使兩個文件的版本不一致。

若是你須要更新到2.3版本，你須要作以下修改：

1. 從項目的bower.json刪除ember-data

2. 更新package.json文件裏的ember-cli-shime版本爲0.1.0

3. 更新ember-data版本爲^2.3.0

模塊導入

Ember Data插件容許你直接導入到你項目中，而且可使用DS命名空間訪問。

以下列表是支持直接導入的API，這些插件將至少支持到3.0版本。

// DS.Model

import Model from 'ember-data/model';



// DS.RESTSerilizer

import RESTSerializer from 'ember-data/serializers/rest';



// DS.JSONSerialzer

import JSONSerialzer from 'ember-data/serializer/json';



// DS.JSONAPISerializer

import JSONAPISerializer from 'ember-data/serializers/json-api';



// DS.JSONAPIAdapter

import JSONAPIAdapter from 'ember-data/adapters/json-api';



//  DS.RESTAdapter

import RESTAdapter from 'ember-data/adapters/rest';



// DS.Adapter

import Adapter from 'ember-data/adapter';



//  DS.Store

import Store from 'ember-data/store';



//  DS.Transiform

import Transiform from 'ember-data/transiform';



//  DS.attr

import attr from 'ember-data/attr';



//  DS.hahMany or DS.belongsTo

import { hasMany, belongsTo } from 'ember-data/relationships';

非公共模塊放在ember-data/-private目錄下，官方建議開發者不要直接在項目中引入非公共的模塊。

若是你引入非公共的模塊就有可能在沒有任何警告的狀況下修改了ember-data的核心代碼。

Ember Data 2.4 beta版

更多有關此版本修復的bug請看Ember Data 2.4.0-beta.1 CHANGELOG

新特性

在2.4版本中新增了2個新的特性，若是你想使用這兩個新功能，你能夠從emberjs/data#master分支中更新，

而後在config/environment.js文件的EmberENV下FEATURES配置。

var ENV = {

  EmberENV: {

      FEATURES: {

          'ds-finder-include': true,

          'ds-references': true

      }

  }

};

更多有關新特性的介紹請移步特性介紹。下面將爲你介紹新增的兩個特性。

ds-finder-include

特性ds-finder-include容許開發者在使用方法store.findAll()、store.findRecord()包含查詢參數。

特別是在關聯查詢的時候，好比下面的查詢實例：

// GET  /articles/1?include=comments

var article = this.store.findRecord('article', 1, { include: 'comments' });



//  GET  /article?include=comments

var articles = this.store.findAll('article', { include: 'comments' });

爲何參數的key使用include呢？是否還記得標準的JSON API裏指定的關聯關係也是使用include。

ds-references

特性ds-references特性的實現能夠參考RFC 57，這上面詳細介紹了有關特性的來源於相關的討論。

引用是一個低級別的接口來執行記錄中的元操做，有不少關係，屬於關係：

• 同步本地數據，不觸發請求或產生一個承諾

• 通知store開始獲取記錄，並說起一個promise做爲返回值

• 通知開始獲取關聯關係的記錄，而且提供一個promise 做爲返回值

• 檢索服務器提供有關記錄或關係的元數據

考慮下面的模型post。

// app/models/post.js



import Model from 'ember-data/model';

import { belongsTo, hasMany } from 'ember-data/relationships';



export default Model.extend({

  comments: hasMany(),

  author: belongsTo()

});

直接使用API獲取兩個model的關聯關係:

var post = this.store.peekRecord('post', 1);



//  檢查author是否已經加載，若是沒有加載觸發請求獲取數據

if (post.belongsTo('author').value !== null) {

    console.log(post.get('author.name'));

} else {

    //  觸發請求，加載數據

    post.belongsTo('author').load();

}



//  從新加載author

post.belongsTo('author').reload();



// 檢查comments是否已經加載，若是沒有加載觸發請求獲取數據

if (post.hasMany('comments').value !== null) {

    var ids = post.hasMany('comments').ids();

    var meta = post.hasMany('comments').meta();

    

    console.log(`${ids.lenght} comments out of ${meta.total}`);

} else {

    post.hasMany('comments').load();

}



//  重載comments

post.hasMany('comments');