Question

I am currently using emberjs to build an app, im getting near completiion but i have some inconsistency related to the didInsertElement method related to a view in the app.
Here is the code :

     didInsertElement : function(){           
        Ember.run.next(this,function(){
            var sub = this.$(document).find('.sub_t');
            $(sub).not('button').siblings('.inside').toggle();
            $(sub).each(function(i){
                $(this).attr('id','s_t' + i + '');
                var s_t = $(this).nextUntil(".sub_t");
                $(s_t).not('button').wrapAll("<div class='s_t" + i + "'></div>");
            });
         });
    },

The problem is that even if i am not using the Ember.run.next the app view is reacting inconsistently. Im just trying to modify the content in my view. Sometimes the jquery works sometimes it is not and its unclear how to reproduce this bug.

Is it related to the size of the file beign loaded?
Or is it a misuse of the Ember run loop or the did insert element method?

Anybody has a cue on that? or a hint on what is happening and what i might do to work this out?

Answer 1

When didInsertElement is called you are guaranteed that the view’s element has been added to the DOM. If you want to also guarantee that the view’s child views have been added as well, you can schedule an action on the afterRender queue, which was added here. i.e.

Ember.run.scheduleOnce('afterRender', this, function(){
    // do something when my view hierarchy has been rendered
});

This would replace Ember.run.next, which is rarely a good idea in an didInsertElement handler.

In addition, within the didInsertElement handler, you should almost always be using the scoped jQuery selector this.$(), instead of the global $.

Between those two hints, you should be able to get things working consistently. If you can’t, you could create a JSFiddle showing a simplified version of what you’re trying to accomplish, and I’d be happy to look at it.