Ember版本小小结

原创
2016/01/25 22:13
阅读数 249

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

  1. {{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

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

  1. 上下文组件

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


{{! 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.jsonbower.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文件的EmberENVFEATURES配置。


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');

展开阅读全文
打赏
1
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
1
分享
返回顶部
顶部