Pedro Costa Neves
Pedro Costa Neves

Reputation: 463

EmberJS Execute JS after Render on all Views

I'm trying to run this code:

var width = 0; 
$('.photos article').each(function(){ width = width + $(this).width();});
$('.photos').width(width);

After the views render and can't figure out how to do that, here's the code with all the views and content:

http://jsbin.com/okezum/6/edit

I want to run my code on all views, can someone help me?

Upvotes: 1

Views: 881

Answers (2)

Pedro Costa Neves
Pedro Costa Neves

Reputation: 463

Fixed with this:

App.GeneralView = Ember.View.extend({
    didInsertElement: function() {
        if (this.$().find(".post img").length > 0) {
            var WIDTH = 0, HEIGHT = $(window).height(), SIDEBAR_WIDTH =   $('#sidebar').outerWidth();
            this.$().find(".post").each(function(){
                WIDTH += parseInt($(this).find('img').attr('width'));
                $(this).find('img').height(HEIGHT - 80).removeAttr('width');
            });
            $('body').children('.ember-view').innerWidth(WIDTH);
        } else {
            Ember.run.next(this, function() {
                this.didInsertElement();
            });
        }
    }
});

Dont know if it's the best approach, but works ;s

Upvotes: 0

intuitivepixel
intuitivepixel

Reputation: 23322

What you are trying to do can be achieved by defining the didInsertElement hook on all your view's and after getting the DOM element's id you can execute what ever jQuery code you might need. Since you want this to be executed on 'all' your view's you could write a general view from which all the view's that need the code to be executed do extend from.

Example:

App.GeneralView = Ember.View.extend({
  didInsertElement: function() {
    var width = 0; 
    $('.photos article').each(function(){ 
      width = width + $(this).width();
    });
    $('.photos').width(width);
  }
});

App.IndexView = App.GeneralView.extend();
...

Note if need to get the view's id you can access it with this.get('elementId'), I've also modified your jsbin, see here for a working version.

Hope it helps.

Upvotes: 1

Related Questions