您现在的位置是:首页 > 文章详情

Ember 3.15

日期:2019-12-26点击:510

Ember 3.15 发布了,此项目包含的 Ember.js, Ember Data 和 Ember CLI 也均已更新。除了常规的引入新功能和 bugfix,Ember 3.15 还标志了 Octane edition 的正式发布,这也是 Ember 的首个 edition release

Edition 是 Ember 在 RFC #364 - Ember 2018 Roadmap 中引入的概念。一个版本(edition)代表了一个统一的编程模型,而发布新的 edition 则代表了由于 Ember 添加了新功能和新概念而导致编程模型的转变。Ember Octane 正是 Ember 的首个 edition。

Ember 3.15 "Octane" 带来了更多现代化的功能,诸如原生 ES 类、装饰器、新的 Glimmer 组件 API,以及一种称为“跟踪属性(tracked properties)”新的状态管理方法。结合起来,这些对 Ember 的创新性改变不仅仅是新的工具和 API,Octane 的特性共同构成了 Ember 应用程序构建方式的范式转变。

此版本值得关注的改进:

  • 引入 Glimmer 组件

旧版本使用组件的方式

 import Component from '@ember/component'; export default Component.extend({ tagName: 'p', classNames: ["tooltip"], classNameBindings: ["isEnabled:enabled", "isActive:active"], })

新版本使用 Glimmer 组件

 <p class="tooltip {{if @isEnabled 'enabled'}} {{if @isActive 'active'}}"> {{yield}} </p>

亦即意味着我们可以创建一个没有根元素的组件

 <p>{{yield}}</p> <hr>

 

  • 针对 Ember 组件模型引入元素修饰符,此功能使开发者可以构建未连接到任何特定组件的可重用 DOM 行为

  • Glimmer Reactivity

下面是 Ember 3.14 指南中的计算属性示例:

 import EmberObject, { computed } from '@ember/object'; const Person = EmberObject.extend({ firstName: null, lastName: null, age: null, country: null, fullName: computed('firstName', 'lastName', function() { return `${this.firstName} ${this.lastName}`; }), description: computed('fullName', 'age', 'country', function() { return `${this.fullName}; Age: ${this.age}; Country: ${this.country}`; }) }); let captainAmerica = Person.create({ firstName: 'Steve', lastName: 'Rogers', age: 80, country: 'USA' }); captainAmerica.description; // "Steve Rogers; Age: 80; Country: USA" captainAmerica.set('firstName', 'Steven'); captainAmerica.description; // "Steven Rogers; Age: 80; Country: USA"

新版本中的跟踪属性(Tracked Properties)

 class Person { @tracked firstName; @tracked lastName; @tracked age; @tracked country; constructor({ firstName, lastName, age, country }) { this.firstName = firstName; this.lastName = lastName; this.age = age; this.country = country; } get fullName() { return `${this.firstName} ${this.lastName}`; }), get description() { return `${this.fullName}; Age: ${this.age}; Country: ${this.country}`; }) } let captainAmerica = new Person({ firstName: 'Steve', lastName: 'Rogers', age: 80, country: 'USA' }); captainAmerica.description; // "Steve Rogers; Age: 80; Country: USA" captainAmerica.firstName = "Steven"; captainAmerica.description; // "Steven Rogers; Age: 80; Country: USA"

详细更新请点此查看:https://blog.emberjs.com/2019/12/20/octane-is-here.html

原文链接:https://www.oschina.net/news/112370/ember-3-15-released
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章