Ember版本小小结 - ubuntuvim的个人页面

撸了今年阿里、头条和美团的面试，我有一个重要发现.......>>>

原文地址：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日发布。

新引入的特性如下：

{{get}}助手

使用实例，获取对象user的属性值


{{user.name}}

{{get user "name"}}

详细使用教程请看ember-get-helper。

{{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版本引入里新特性，包括如下特性：

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

{{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查看详情。

上下文组件

新的上下文组件允许多个组件共享数据，通过组件嵌套，通过属性传递参数。


{{! 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版本，你需要做如下修改：

从项目的bower.json删除ember-data
更新package.json文件里的ember-cli-shime版本为0.1.0
更新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');

分享文章

Ember版本小小结
顶

原

浏览器兼容性问题

2.1版本

2.2 测试版

2.3 版本

Ember Data 2.3版、2.4测试版发布

模块导入

Ember Data 2.4 beta版

新特性

ds-finder-include

ds-references

ubuntuvim

OSCHINA 社区

在线工具

微信公众号

OSCHINA APP

OSCHINA App —— 关注技术领域的头条文章

分享文章

Ember版本小小结 顶 原

浏览器兼容性问题

2.1版本

2.2 测试版

2.3 版本

Ember Data 2.3版、2.4测试版发布

模块导入

Ember Data 2.4 beta版

新特性

ds-finder-include

ds-references

ubuntuvim

OSCHINA 社区

在线工具

微信公众号

OSCHINA APP

OSCHINA App ——
关注技术领域的头条文章

Ember版本小小结
顶

原