CODEWITHSUNDEEP
jqueryember.js
Cereal Killer
Cereal Killer

Reputation: 3414

Events in Ember

I have a fadeTo animation on a link that is into an Ember partial template; this animation is activated on mouse click on the link and it is done like this:

jQuery('#object').fadeTo(1000, 1);

so it takes 1 second to complete; the thing is that if I move the mouse outside the partial template's area, before the animation finishes, then it stops; for example if I click the link, the animation starts and the object starts to fade in, but if I move the mouse out of the partial template area before 1 second is passed, than the object will not be completely visible but its opacity will remain less then 1;

The function that executes the fadeTo code is called within didInsertedElement of the actual view... Someone knows how can I have an animations that once started will complete even if the user moves the mouse outside the partial template area?

Upvotes: 1

Views: 337

Answers (1)

Travis
Travis

Reputation: 1523

A couple things:

  1. Clicking on the link gives me a 404, and without more code it's tough to get context

  2. Are you using Ember event handling properly? You mentioned the fadeTo code was in the didInsertElement function, which doesn't sound right when handling a click event. didInsertElement is a callback that is called after the element is rendered (or re-rendered).

Given the description, it sounds like you have two options. Neither approach should be dependent on the cursor position.

Option 1

If your template is simple enough that you can bind to click events in your view, go for it. That way, you don't have to specify any selectors (e.g., #object).

In your template you should just have a standard link:

    <a href="#"> link text </a>

Now, handle the event in your view

    App.FooView = Ember.View.extend({

      click: function(e) {
        $(e.target).fadeTo(1000, 1);
        return false;  // prevent page transition
      }

    });

Option 2

Bind to the link directly, and handle the event in your controller.

In your template, add an action to the link:

    <a href="#" id="object" {{action "fade"}}> link text </a>

Now, handle the event in your controller using the element id:

    App.FooController = Ember.ObjectController.extend({

      actions: {
        fade: function() {
          $('#object').fadeTo(1000, 1);
        }
      }

   });

If I'm way off base here, please provide some code for us. Thanks.

Upvotes: 5

Related Questions