Subscribe to DOM events


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 and this feels just dirty.

How can I improve the subscription code below?

import Ember from 'ember';

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


You should put that in the view instead. There are hooks for these types of needs.

import Ember from 'ember';

export default Ember.View.extend({

    bindResize: function(){
        // Ensure DOM changes have been applied'afterRender', this, function(){
            this.$('.post-content img').on('click', this.resizeImage);

    unbindResize: function(){
        // Remove event bindings before "un-rendered"
        this.$('.post-content img').off('click', this.resizeImage);

    resizeImage: function(){
        // RESIZE HERE



Or you can build a component/view for the image itself and attach an action handler.

For instance: