Ember.js 资源列表

最近我应邀为朋友写一个 Web App，前期在考虑技术栈的时候选择了 Rails API＋Ember.js。考虑到这个应用的规模，选择 Ember.js 或许有点重，但是做公司的项目一直都在用 Angular，实在有点玩腻了（Angular 很好），而其他的前端框架要么不好玩，要么还不够成熟（我真好想用 Meteor，好想好想……）。纠结反复，最终还是决定玩一下 Ember.js。

开始动手写了一天之后，我觉得 Ember.js 真的很棒！去年前曾经试过水，但那时还没有发行第一个正式版，文档乱七八糟不说，Ember-data 更是让人抓狂不已。但是现在好多了，真是好太多了。而且我发现像我这种有架构洁癖加代码洁癖的强迫症患者，Ember.js 比 Angular 更符合我的审美观。

眼下第一目标是把这个应用写完，在此过程中本着打破砂锅问到底的精神，我在网上找到一些很不错的 Ember.js 的资源。其中有好些没来得及细细看完，也有一些值得多看几遍，日后指不定还用得着呢。于是记录于此——

本列表正持续更新中。如果你喜欢，请收藏，更新之后你会第一时间收到；如果对你有用，请不吝赞赏。（Last updated at: Apr 14, 2014 10:00pm）

---

原理

• Ember Run Loop and TDD（Ember 运行迴圈和测试驱动开发） 2014-01-24
  
  
  • This is how I understand run loop finally
• Router Request Lifecycle（路由请求的生命周期） 2013-02-08
• PostgreSQL Basics by Example 2013-08-19
  
  
  • 这跟 Ember.js 半毛钱关系都没有，纯属见猎心喜……
• Ember Run Loop Visual（可视化的运行迴圈演示）
  
  
  • 来源于这篇精彩的问答
• Ember Components Transclude My Directives（讲述 Angular 和 Ember）
  
  
  • 我多次希望像别人明确 Angular 和 Ember 的区别（一个是工具集，一个是框架），以及它们各自的优缺点（证明 Ember 一点都不弱于 Angular），但是我人微言轻，没啥公信力，多数前端工程师又太过迷信和狭隘，所以我总是徒劳的一个。
    不过这个演讲非常棒，非常准确清晰的说出了我想说的大部分东西（从最具争议的 Directive 和 Component 的对比入手）所以，我强烈推荐阅读一下，特别是熟悉 Angular 的你们，因为该演讲者刚在今年的 NgConf 上发表了相同主题的另外一次演讲。
  • 演讲视频：http://confreaks.com/videos/3303-emberconf2014-ember-components-transclude-my-directives

---

技巧

• An easy and clean way to set the page title（一个简洁的改变 <title> 的方法）
• Ember Animation and Transition 非常好的动画范例集合
  
  
  • 在线 Demo： http://ef4.github.io/ember-animation-demo
  • 配套演讲（at Ember Conf 2014) http://confreaks.com/videos/3302-emberconf2014-animations-and-transitions-in-an-ember-app
• Alert messages in Ember Apps 全局通知栏的一种实现方法

---

测试

• Ember.js Testing 2014-01-16
  
  
  • 入门级测试环境搭配指南，胜在比较新
• Ember.js testing with Jasmine
  
  
  • 没用 Jasmine，重点是测试中的异步控制
• Testing Ember with Jasmine 2.0
  
  
  • 这一篇相当新，但为啥都喜欢 Jasmine？
• Integration testing your ember.js app with QUnit and Karma
  
  
  • 我喜欢 Karma
• Ember Integration Testing With Konacha
  
  
  • Great Post!
• The Unofficial - Official Ember Testing guide
  
  
  • 一个很好的测试指南

---

协同

• How to execute jQuery logic correctly after your View has been rendered?（在 View 渲染完之后如何正确的执行 jQuery 代码？） 2013-08-01
• Reusable D3 charts with Ember.js Components
  
  
  • 一位韩国女 JS 工程师写的 DS 与 Ember 的整合

---

综合

• Balint Erdi 干货很多的一家
• Ember Conf 2014
  
  
  • Ember 社区的官方技术会议，干货超多，有全部视频放出
• Atomic Spin
  
  
  • Highly recommended!
• Ember Doc
  
  
  • 和官网那个 API 内容一样，但是访问速度快，界面也有改善，查询浏览更方便——但是我有 Dash ^^
• Pixel Handler's Blog
  
  
  • This Guy is Awesome!
• The Software Simpleton
  
  
  • So does him!
• Yanted
  
  
  • Only 3 useful posts
• Ember Addons
  
  
  • 这里有各种干货，拿来用或参考都不错
• Ember Sherpa
  
  
  • It actually doesn't have too many informations right now, but it has the potential to be a great resource.
• Code Berry
  
  
  • ZOMG！这么多好东西！！I LOVE THIS BLOG！！！

实例

• Simple Reach

---

App.PostRoute = Ember.Route.extend
  beforeModel: ->
    Ember.$('body').addClass 'loading'

  model: (params) ->
    @store.find 'post', params.post_id

  # we can't use `afterModel` here to cancel the loading animation
  # because the comments request has not been resolved yet
  # following is an idea to use Ember.RSVP to make a dedicated promise
  # for unfulfilled comments request:

  setupController: (post, controller) ->
    comments = Ember.RSVP.makePromise(post.get 'comments')

    comments.then ->
      Ember.run.scheduleOnce 'afterRender', @, ->
        Ember.$('body').removeClass 'loading'

---

Ember.View.reopen({
  didInsertElement : function(){
    this._super();
    Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
  },
  afterRenderEvent : function(){
    // implement this hook in your own subclasses and run your jQuery logic there
  }
});