CODEWITHSUNDEEP
ember.js
lessless
lessless

Reputation: 896

Execute JQuery code after view has changed

I'm using Foundation tooltips on the page with query-parameters - they control what elements are displayed, acts as filter basically.

When user change filter and new elements are displayed tooltip stops to work as it needs to be reattached to the new elements - $(document).foundation('tooltip', 'reflow'); so I wonder what is the correct way to execute this code after view is re-rendered.

For sure this must go to the view layer, but I can't find appropriate event http://emberjs.com/api/classes/Ember.View.html#events

Upvotes: 1

Views: 108

Answers (3)

Quinn Lee
Quinn Lee

Reputation: 91

I can think of a few ways

export default Ember.Route.extend({
    queryParams: {
      <name-of-query-param>: { refreshModel: true }
    }

Or have an trigger this.refresh() on the route.

Or in the controller, observe the query param and execute the event in a loop

Upvotes: 1

artych
artych

Reputation: 3669

You might wrap each element in a Component and use didInsertElement event. You could access jQuery object for the component as this.$()

export default Ember.Component.extend({

  setTooltip: function() {
    this.$(). ... //here your jQuery
  }.on('didInsertElement')

});

Upvotes: 1

Andrey Mikhaylov - lolmaus
Andrey Mikhaylov - lolmaus

Reputation: 23873

Use an observer function like this:

$document: Ember.computed( function() {
  return $(document);
}),

updateTooltips: Ember.observer('theFilter', function() {
  Ember.run.later( function() {
    this.get('$document').foundation('tooltip', 'reflow');
  }.bind(this));
})

As further improvement, you can abstract the tooltips code into a service.

Upvotes: 1

Related Questions