callback - 插入子 dom 元素或更改其类时的回调？

Question

在 Ember.js 中，我有一个视图

{{#if obj.property}}
    <div {{bindAttr class="prop"}}>content</div>
{{/if}}

当这个元素被插入到视图中时，以及当类被附加到元素上时，我怎样才能被回调？我想这样做是因为 CSS 类是一个动画类，并且我想挂接到元素的 onAnimationEnd 事件，以便在动画结束时收到通知。

Answer 1

将 div 更改为实现 didInsertElement 的自定义视图子类怎么样？例如

{{#if obj.property}}
    {{view App.MyView}}
{{/if}}

和

App.MyView = Ember.View.extend({
  classNameBindings: "prop",
  didInsertElement: function() {
     // use this.$() to get a jQuery handle for the element and do what you'd like 
  }
})

Answer 2

除了卢克的回答，我发现了另一种实现这一点的方法，这可能更可取，因为卢克的方法需要创建一个视图。

通过利用 DOM 事件冒泡这一事实，我可以在包含可能插入的任何内容的父 DOM 元素上为 animationEnd 设置事件处理程序。例如

<div id="container">
{{#if obj.property}}
    <div {{bindAttr class="prop"}}>content</div>
{{/if}}
</div>

// view.js
didInsertElment: function() {
    this.$('#container').bind('webkitAnimationEnd', function(e) {
        // e.target is the element whose animation ended.
    }
}