javascript - Ember - Resize DIV on load, transition and resize? -

i'm building ember app needs size container div full window height on load of application, , run same resize function again when transitioning new route, , on window resize.

on normal site, i'd this:

var appui = {     init: function(){         appui.sizecontainer();     },      sizecontainer: function(){         var winheight = jquery(window).height();         jquery('#container').height(winheight);     },      onresize: function() {         appui.sizecontainer();           } } jquery(document).ready(function($){     appui.init();      jquery(window).resize(function(){         appui.onresize();     }); }); 

but won't work in ember.

this can't component, because #container div wraps entire current view. ember moving away views, how should this?

the way came use view, , hook onto didinsertelement, couldn't figure out how can without having create view.js file every route, contains same resize code? , how resize event? thought application view didinsertelement might work this, runs once on load.

all route templates follow patten:

{{top-header}}  {{background-image image=backgroundimage}}  {{side-menu session=session menuopen=menuopen}}  <div id="container" class="vert-center route-name">       {{partial "_logo"}}               {{some-component}}  </div> 

on loading application , on window resize can done pretty way described.

one easy way override rendertemplate hook inside applicationroute. within hook, can render application template , initialize resize listener on window object:

// handles on document load , on window change events app.applicationroute = ember.route.extend({     rendertemplate: function(controller, model) {         this.render('application');             // render application template         appui.init();                           // call init event on application load         ember.$(window).resize(function() {     // setup resize listener on window object called when window resizes             appui.onresize();         });     } }); 

as far resizing each time route loads, implement generic ember.route, let's call resizableroute example, calls appui.resize() after template rendered. can again achieved overriding rendertemplate hook.

// calls onresize() each time current route's template rendered in dom app.resizableroute = ember.route.extend({     rendertemplate: function() {         // render template same name route (assumes follow ember naming conventions)         this.render(this.routename);          // call resize since route loaded                  appui.onresize();     }  }); 

now can make other route extend resizableroute and, every time route's template rendered, appui.onresize() called.

app.anyotherroute = app.resizableroute.extend({     // other stuff }); 

the reason calls made after template rendered because way #container element inserted in dom , can grabbed using jquery.

here running jsfiddle example

---

edit

instead of overriding rendertemplate hook, way achieve create resizeuicomponent perform resizing each time route loaded. flaw have remember insert component each route's template.

app.resizeuicomponent = ember.component.extend({      didinsertelement: function() {         this.$().hide();   // make component invisible, better css quick example         appui.onresize();     }  }); 

and add component templates (including application) want call onresize() each time load:

{{top-header}}  {{background-image image=backgroundimage}}  {{side-menu session=session menuopen=menuopen}}  <div id="container" class="vert-center route-name">       {{resize-ui}}  {{!-- add invisible resize component child of #container ensure necessary rendering order --}}          {{partial "_logo"}}               {{some-component}}  </div> 

and can add listener on window object after init event of applicationcontroller:

app.applicationcontroller = ember.controller.extend({     oninit: function() {         ember.$(window).resize(function() {     // setup resize listener on window object called when window resizes             appui.onresize();         });     }.on('init'); });