CODEWITHSUNDEEP
ember.jsember-cli
Hedge
Hedge

Reputation: 16748

Subscribe to DOM events within Ember app

I've got a Ember CLI based blog. I currently resize all <img> inside posts upon clicking them using this function inside the application-controller.

I rely on on('init') and Ember.run.later and this feels just dirty.

How can I improve the subscription code below?

import Ember from 'ember';

export default Ember.ArrayController.extend({
  imageScaling: function() {
    Ember.run.later((function() { 
      //Subscribe to the actual event
      Ember.$(".post-content img").on("click", function(){
        // RESIZE HERE
      })
    }), 3000)
  }.on('init')
});

Upvotes: 1

Views: 108

Answers (1)

GJK
GJK

Reputation: 37369

If you're inserting all of your images inside Ember templates, you can always use the action helper:

<img {{action 'scaleImages' on='click'}} src='' />

I realize that's probably not the case though. The way I've dealt with DOM interactions in the past is to override the application view then set up and tear down my event handler there. You can also avoid the Ember.run.later call by modifying your jQuery event listener. Here's how I would do it:

// app/views/application.js
export default Ember.View.extend({
    setupImageScaling: function() {
        $('body').on('click.image-scaling', 'img', function() {
            // RESIZE HERE
        });
    }.on('didInsertElement'),

    teardownImageScaling: function() {
        $('body').off('click.image-sacling');
    }.on('willDestroyElement')
});

In my opinion, the above is the 'most Ember' way of handling this kind of situation.

Upvotes: 2

Related Questions