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 應用程式構建方式的範式轉變。
此版本值得關注的改進:
舊版本使用組件的方式
import Component from '@ember/component';export default Component.extend({ tagName: 'p', classNames: ["tooltip"], classNameBindings: ["isEnabled:enabled", "isActive:active"],})
新版本使用 Glimmer 組件
<p> {{yield}}</p>
亦即意味著我們可以創建一個沒有根元素的組件
<p>{{yield}}</p><hr>
下面是 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