UI Controller observes a view to set properties

observing_view.js

    SC.addObserver(view, 'element' ,function() { 

      var element = view.get('element');  
      if ( element ) {

        var deviceHeight = $(window).height();  
        var headerHeight = $('#header').outerHeight();   // null
        var footerHeight = $('#footer').outerHeight();  // null 
        var availableHeight = deviceHeight - headerHeight - footerHeight; 


        var tabs = get(self, 'tabViews'); 
        tabs.forEach( function(item ) {
          
          set( item, 'scrollableHeight', availableHeight ); 

        });
      }
    
    });

observing_view2.js

// this is applied on the UI Controller    
SC.addObserver(view, 'isInsertedElement' ,function() { 

        var deviceHeight = $(window).height();  
        var headerHeight = $('#header').outerHeight();   // NOW not null
        var footerHeight = $('#footer').outerHeight();  // NOW not null 
        var availableHeight = deviceHeight - headerHeight - footerHeight; 


        var tabs = get(self, 'tabViews'); 
        tabs.forEach( function(item ) {
          
          set( item, 'scrollableHeight', availableHeight ); 

        });
    
    });

// create a mixin for the view
ControlledView = SC.Mixin.create({
  isInsertedElement: false,

  didInsertElement: function(){
    set(this, 'isInsertedElement', true);
    console.log( ' hola' );
  }

});