摘要：警告版本是很不稳定的，并不推荐使用于要上线的应用。如果你要尝试新的特性，要么是新建一个测试用的，要么是你的应用离正式上线还早并且你和你的团队折腾得起。在此功能正式发布之后应该是不需要这段补丁代码的，目前来说也不会影响使用。
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 社区，转载请注明。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/85965.html
摘要：好，你用就用吧，各种问题自己也不会看文档问谷歌，成天怨声载道的不得不吐槽一下现在的年轻人。为什么使用有关和的纠结历史可以去谷歌一下，此处不再啰嗦最根本的原因就是对的支持更好，更新和维护也更勤快。 Tips on Ember 2 对我来说是没什么计划性的写作，我只是把它当做是每天工作的总结日志，一个很重要的目的是为团队做一些技术事务的整理，以帮助一些新人快速成长起来。如果有些内容不能满足...
摘要：因为组件的存在范围被限制在以内，这就是这种机制目前存在的意义所在。组件都是可以传递参数或外部作用域的，利用此机制进行判断来执行可选行为，这是对用户友好的举措。 这一篇还是一个简单的例子所引发的思考。 你看，如今的框架和库，无论规模大小功能多少，它们在本质上都朝着组件化的思路快速演进着。Angular 有 directives，Angular 2应该也还是这个叫法；Ember 从 Vie...
摘要：如果说传统的前端开发是以页面为中心来入手的话，那么现代的应用开发就是以状态为中心来着手设计和开发的。初步分析路由是怎么管理状态的复杂的话题简单说在中，应用的每一个可能的状态都是通过体现的。 引子 SPA（单页面应用）的核心是什么？ 自该类型应用诞生以来我最多思考的问题就是这个。现在前端 SPA 框架满天飞，许多不是框架的也被称作框架，究竟有什么代表性的层（layer）能让一个系统称得上...
摘要：今天这篇主要讲讲里关于样式开发的一些前期准备工作，主要是和。总的来说就不要再用了，又大又笨而且连亲爹都准备放弃它了，未来将是小快灵组件协同工作的大趋势，就是可以用来替代的组件库。 今天这篇主要讲讲 Ember CLI 里关于样式开发的一些前期准备工作，主要是 Sass 和 Bootstrap。 Ember Addons 是寻找各种组件的绝佳场所，下文将要介绍的一些都可以在这里找到，没事...
摘要：就没必要动牛刀，创建一个数据库了执行完后，在目录下创建一个程序，自动植入到当前项目中，访问的和与访问域名端口一致。就没必要动牛刀，创建一个数据库了本篇博文将为你介绍如何使用实现权限控制，我会创建一个简单的登录示例加以说明。 文章来源：http://blog.ddlisting.com 官网对于登录、用户权限的介绍只有一段简单的说明，并没有详细说明如何使用service实现权限控制。下面...
阅读 1481·2023-04-26 02:30
阅读 870·2021-11-10 11:36
阅读 1203·2021-10-08 10:14
阅读 3316·2021-09-28 09:35
阅读 1394·2021-08-23 09:47
阅读 2310·2019-08-30 15:56
阅读 1320·2019-08-30 15:44
阅读 1570·2019-08-30 13:59
