EmberJS Execute JS after Render on all Views

Question

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?

intuitivepixel · Accepted Answer · 2013-06-29 00:47:41Z

1

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.

edited Jun 29, 2013 at 0:47

answered Jun 29, 2013 at 0:03

intuitivepixel

23.3k3 gold badges59 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Pedro Costa Neves Over a year ago

I see, maks sense :D but do you know why width is returning 0 ? :s

intuitivepixel Over a year ago

just put a console log, and it returns the valid width: jsbin.com/ezunic/3/edit

Pedro Costa Neves Over a year ago

Hmmm that I got here while I was applying your code, the children width to sum and get a total width that I couldn't get, it return []. I'm trying to get the article width, from all of then to sum :s know?

intuitivepixel Over a year ago

can it be that $(.photos article) does not match what you need? looking at your templates, should it not rather be $(section article)

intuitivepixel Over a year ago

I've also edited my answer since I didn't realize you want the actual element you are looping over rather than the hole view.

|

Pedro Costa Neves · Accepted Answer · 2013-06-30 19:37:10Z

0

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

answered Jun 30, 2013 at 19:37

Pedro Costa Neves

4631 gold badge5 silver badges15 bronze badges

Collectives™ on Stack Overflow

EmberJS Execute JS after Render on all Views

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related