原文地址: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');