使用Ember.js临时将CSS类添加到DOM元素

Question

Background info:

I'm using Ember.js.

Here's my view code:

App.AddView = Ember.View.extend({
  classNameBindings: ['enter:enter:leave', 'dropped:dropped:leave'],
  enter: false,
   drop: function(event) {
     event.preventDefault();
     event.stopPropagation();
     this.set('dropped', 'true');
     this.set('text', 'Thanks');
   }
 });

And my Handlebars code:

<script type="text/x-handlebars" id="add">
  {{#view App.AddView id="drop"}}
      {{msg}}
  {{/view}}
</script>

When I drop an item on it, it say's "Thanks" and turns blue. Wonderful.

Objective:

What I'd like to do, is to keep the "Thanks" and the blue color for a couple of seconds and then fade back to the regular color and message that are displayed on pageload. I couldn't find examples for doing this in Ember.js and all my attempts to just use regular jQuery ways of doing things don't seem to work.

The question:

How can I make actions (applying a class to an element, changing the text of an element, etc.) timeout-bound in Ember.js?

Answer 1

Class bindings will occur the moment the binding meets the condition. In order to achieve a delayed/animated effect, you'll have to either use CSS3 animations (a keyframe animation might work), or use JQuery. There is nothing wrong with using JQuery for animations and other complex DOM manipulation.

From within a view you can access the scoped JQuery object with the this.$() method. You could do something like the following:

App.AddView = Ember.View.extend({  
   classNames: ['defaultState'],
   drop: function(event) {
     event.preventDefault();
     event.stopPropagation();

     this.$().animate({ backgroundColor: "#7cc9ea"}, 400);
     this.set('text', 'Thanks');

     Ember.run.later(this, function(){
       this.$().animate({ backgroundColor: "#FFFFFF"}, 400);
       this.set('text', '');
     }, 500);
   }
 });

In order to animate the background color, you will need the jquery-color plugin. Hope this helps! :)

Edit: If you want to animate the background or otherwise manipulate the DOM of a nested element, you can access it using a selector like you would normally; just remember it starts from the view's element as a the root node. eg this.$('#myNestedButton')