[Tips on Ember 2] 如何嘗試 angle-bracket component

Yu_Huang 發布于2019-08-21 10:39 / 954人閱讀

摘要：警告版本是很不穩定的，并不推薦使用于要上線的應用。如果你要嘗試新的特性，要么是新建一個測試用的，要么是你的應用離正式上線還早并且你和你的團隊折騰得起。在此功能正式發布之后應該是不需要這段補丁代碼的，目前來說也不會影響使用。

Ruby China 的朋友大概都知道我很喜歡 Ember，然而我用 Ember 的經歷其實遠比不上 Angular 那么豐富（Ember 業余愛好，Angular 做正兒八經的項目）。最近我換工作了，終于可以在新的項目里主導使用 Ember 來開發 Web App，恰逢 Ember 進入了 2.0 時代，許多東西和當初自己瞎玩的時候相比變化都很大。于是我就想把接下來在實際工作中的一些經驗技巧都記錄下來發在 Ruby China，希望對喜歡 Ember，關注前端開發的朋友們有所幫助。

來到新的公司新的團隊，終于可以徹徹底底的使用 Ember 了，由于接下來有了發揮的空間和自由，所以我特別想先嘗試嘗試那些“傳說中了好久”的新特性，第一個想到的就是 angle-bracket component（也就是尖括號形式的 component，寫起來如同 HTML 一樣，這也是 Angular／React 等框架創造 component 的形式，一度是 Angular 的主推賣點）。

雖然 Ember 2.0 已經發布了，但是 angle-bracket component 還要等到 ~2.1 才能在正式版本里出現，如果現在就想嘗鮮的話就得使用 canary 版本了，這主要是因為 Ember 的新特性需要手動開啟 |44135dc37db6e69bf4a7cd78398c5a340| 才能嘗試，而目前只有 canary 版本允許你開啟 Feature Flags（當前可以使用的 feature flags 有一份列表可查）。

?警告：canary 版本是很不穩定的，并不推薦使用于要上線的應用。如果你要嘗試新的特性，要么是新建一個測試用的 Ember App，要么是你的應用離正式上線還早并且你（和你的團隊）折騰得起。就個人經驗來說 canary 版本本身還算穩定（畢竟有測試），但問題主要出在：1）API 的變化沒有文檔，你需要自己去跟蹤 issues；2）周邊工具會收到影響（比如我在嘗試 angle-bracket component 的時候，ember inspector 就有 bug 了，會影響正常的開發）

下面簡要列舉開啟 angle-bracket component 相關的 feature flags 的步驟：

升級 ember 和 ember-data（可選）至 canary 版本

更改 bower.json 文件內相關的部分為：

"dependencies": {
  "ember": "components/ember#canary",
  "ember-data": "components/ember-data#canary"
}

然后執行 $ bower uninstall ember && bower uninstall ember-data && bower install，或者你也可以不去 uninstall 直接嘗試 bower install，但是有時候會需要解決煩人的依賴問題。

開啟相關的 feature flags

編輯 config/environment.js，在 ENV.EmberENV.FEATURE 下添加下面的代碼：

var ENV = {
  // ...
  EmberENV: {
    FEATURES: {
        "ember-htmlbars-attribute-syntax": true,
        "ember-htmlbars-inline-if-helper": true,
        "ember-htmlbars-component-generation": true
    }
  // ...
  }
}

重寫舊的 components

舊的 components 都是 Ember.Component 的子類，而 angle-bracket component 則是 Ember.GlimmerComponent 的子類，所以你只需要保證這一點就可以完成轉換了。一個新創建的 angle-bracket component 的代碼看起來是這樣的：

import Ember from "ember"

export default Ember.GlimmerComponent.extend({
})

不出意外的話我認為當正式版本發布后，現在的 Ember.Component 將被 Ember.GlimmerComponent 取代，所以以后可能還得改回來（這應該還有段日子的）。內部其他的 API 目前還是以 Ember.Component 的文檔為準，未來有什么變化以后再看吧。

現在重要的是 component template 的寫法，我在測試的時候把一個登錄表單封裝成了 component，以下是其 template 的寫法和使用的方法：

如上，可以看到新的模版語法里給 component 傳遞數據和訪問數據的一些寫法上的變化，這些變化其實是依賴于 "ember-htmlbars-attribute-syntax" 這個 feature flag 的。

修復一個 deprecation warning

觀察修改后的應用，可以看到這樣的警告：

修補這個問題的代碼很簡單：

Ember.GlimmerComponent.reopenClass({
  isComponentFactory: true
})

這段代碼可以插入到 app/app.js 文件里，在應用初始化的時候即時生效。在此功能正式發布之后應該是不需要這段補丁代碼的，目前來說也不會影響使用。

結束

就是這樣了，從現在開始你可以使用新的語法來創建 components，除此之外還有新的 htmlbars-attribute-syntax（上例所示）和 htmlbars-inline-if-helpers 特性。HTMLBars 對于模版語法帶來的改變，可以參考這篇總結性的文章：http://colintoh.com/blog/htmlbars

下一篇我打算講講 Sass 在 Ember CLI 里面的一些最佳方案，其中包括如何整合 Bootstrap 的 Sass 版（而不是直接 import 它的 css 版本），以及如何在此基礎上使用其他的 Sass 庫／框架等等。這個選題是因為新團隊里的伙伴們對這件事情有些爭執，所以我就確定了一個最佳方案，宗旨是：1）保證最大的靈活性和定制性；2）在此基礎上讓設置步驟足夠簡單。

我也樂意聽聽大家的反饋，如果有什么事情是你覺得很想了解的，或是你已經做到了但是覺得還不足夠好的，可以回復我，等我有了答案之后我也會如此整理出來和大家分享。

關于 Ember Inspector 的 bug

目前使用 canary 版本的時候，ember inspector 會有一個隱蔽的 bug，其表現是：當你在 ember inspector 開啟的狀態下（開發者工具打開并且當前的 tab 是 Ember）刷新當前應用時頁面會變空白，此時你可以在 console 下看到這樣的警告：

這個問題其實和你的應用無關，是 ember inspector 在刷新后重新初始化的時候造成的，經個人測試只在最近的 canary 版本里存在，估計 ember inspector 更新以后會修復吧。有一個簡單的臨時解決辦法就是關閉開發者工具然后再刷新就好了，之后再開啟開發者工具之后 ember inspector 還可以用。其實你只要保證刷新的時候 ember inspector 不處于當前激活的 tab 就好了，開發者工具可以不關的。

原文首發于 Ruby China 社區，轉載請注明。

GPU云服務器云服務器 ember 2 js Ember tips tips1

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85965.html

[Tips on Ember 2] Ember CLI with Webstorm

摘要：好，你用就用吧，各種問題自己也不會看文檔問谷歌，成天怨聲載道的不得不吐槽一下現在的年輕人。為什么使用有關和的糾結歷史可以去谷歌一下，此處不再啰嗦最根本的原因就是對的支持更好，更新和維護也更勤快。 Tips on Ember 2 對我來說是沒什么計劃性的寫作，我只是把它當做是每天工作的總結日志，一個很重要的目的是為團隊做一些技術事務的整理，以幫助一些新人快速成長起來。如果有些內容不能滿足...

curlyCheng 2019-08-21 10:39 評論0 收藏0
[Tips on Ember 2] How components works when out of

摘要：因為組件的存在范圍被限制在以內，這就是這種機制目前存在的意義所在。組件都是可以傳遞參數或外部作用域的，利用此機制進行判斷來執行可選行為，這是對用戶友好的舉措。這一篇還是一個簡單的例子所引發的思考。你看，如今的框架和庫，無論規模大小功能多少，它們在本質上都朝著組件化的思路快速演進著。Angular 有 directives，Angular 2應該也還是這個叫法；Ember 從 Vie...

jk_v1 2019-08-21 10:40 評論0 收藏0
[Tips on Ember 2] UI 布局與應用狀態的關系處理

摘要：如果說傳統的前端開發是以頁面為中心來入手的話，那么現代的應用開發就是以狀態為中心來著手設計和開發的。初步分析路由是怎么管理狀態的復雜的話題簡單說在中，應用的每一個可能的狀態都是通過體現的。引子 SPA（單頁面應用）的核心是什么？自該類型應用誕生以來我最多思考的問題就是這個。現在前端 SPA 框架滿天飛，許多不是框架的也被稱作框架，究竟有什么代表性的層（layer）能讓一個系統稱得上...

wayneli 2019-08-21 10:39 評論0 收藏0
[Tips on Ember 2] Ember CLI 和 Sass (及其周邊) 的協同工作

摘要：今天這篇主要講講里關于樣式開發的一些前期準備工作，主要是和。總的來說就不要再用了，又大又笨而且連親爹都準備放棄它了，未來將是小快靈組件協同工作的大趨勢，就是可以用來替代的組件庫。今天這篇主要講講 Ember CLI 里關于樣式開發的一些前期準備工作，主要是 Sass 和 Bootstrap。 Ember Addons 是尋找各種組件的絕佳場所，下文將要介紹的一些都可以在這里找到，沒事...

ziwenxie 2019-08-21 10:39 評論0 收藏0
使用service實現登錄、權限控制

摘要：就沒必要動牛刀，創建一個數據庫了執行完后，在目錄下創建一個程序，自動植入到當前項目中，訪問的和與訪問域名端口一致。就沒必要動牛刀，創建一個數據庫了本篇博文將為你介紹如何使用實現權限控制，我會創建一個簡單的登錄示例加以說明。文章來源：http://blog.ddlisting.com 官網對于登錄、用戶權限的介紹只有一段簡單的說明，并沒有詳細說明如何使用service實現權限控制。下面...

Aomine 2019-08-19 18:32 評論0 收藏0