Ember.js アイテム追加時にアニメーションさせる

Ember.jsは、配列に要素追加時などに自動で反映してくれるのがいいところですが、時には要素追加時にアニメーションなどの特殊な効果を追加したい時があります。
Ember.ViewのdidInsertEventフックを使うことで、これを実現できます。

サンプルコードを以下に示します。

  <script type="text/x-handlebars">
    {{#each todos}}
      {{view App.TodoView content=this}}
    {{/each}}

    <button {{action "appendTodo"}}>Append Todo</button>
  </script>

  <script type="text/x-handlebars" data-template-name="todo">
    <div class="Todo">
    Todo Item
    </div>
  </script>

.TodoクラスはCSSで、display: noneに設定されています。App.TodoViewがDOMに追加されたタイミングでアニメーションしながら表示します。

App.TodoView = Ember.View.extend({                                                       
  templateName: 'todo',                                                                  
  content: null,                                                                         
  didInsertElement: function() {                                                         
    this.$('.Todo').show(1000);
  }
});

App.TOdoViewのdidInsertElementで、アニメーションしながらTodoアイテムを表示するように指定しています。簡単ですね。

以下のページで実際の動作を確認できます。