[BackboneJS] How to immediately detect if a view has been added to the DOM

JavaScript
1

Hi, I’m new in Backbone JS, and haven’t found any best practice to tackle my problem when googling. So, I would like to ask in this forum. Here is the problem :

When I learn about view in BackboneJS, the best practice I found is to render the view first, then add it to the DOM element [ it will be costly for the rendering process if I add the element to the DOM first ]. So the DOM-add script will look like this :


var AnObject = new Backbone.View.extend({
    ...
    render : function () {
        this.$el.html(
	    this.template( this.settings )
	);
        return this;
    },
    ...
});
var mainHeader = new MainHeader();
$( document.body ).append( mainHeader.render().el );

But the problem arise when I have a view that need to get the width value of an element in it’s template. As we know the we can’t get any element width/height if it hasn’t been added to the DOM yet. The code shall look like this :


var AnObject = new Backbone.View.extend({
    ...
    render : function () {
        this.$el.html(
	    this.template( this.settings )
	);

        $anElement = this.$el.find('ul.aList li:first-child a');
        this.someFunction( $anElement.width() ); // anElement.width() will return 0, for it hasn't been added to the DOM

        return this;
    },
    ...
});
var anObject = new AnObject();
$( document.body ).append( anObject.render().el );

The most obvious way solve this, is to call another method after the object has been added to the DOM. But I’m looking for another approach rather than adding ‘another function call outside the view class’. Something like adding an event handler inside the view class, event that listen if the element has been added to the DOM [unfortunately, I haven’t found cross browser event for this]. Any best practice / comments?

Thanks.