Stacking the main exit in Ember

Question

I have a layout that requires the main outlet to be 100% of the page height.

Here the JSFiddle shows the problem I have. I can create an index view and assign css classes to it through the classNames property, but there is always the root of the div that I do not understand as style.

http://jsfiddle.net/kgnQz/

This is what the jsfiddle body looks like

<div id="ember153" class="ember-view"> <!-- Need style here --> <script id="metamorph-0-start" type="text/x-placeholder"></script> <div id="ember161" class="ember-view indexViewClass"> This is the index view </div> <script id="metamorph-0-end" type="text/x-placeholder"></script> </div> 

Usually, when I create a view, I can provide classaNames: ['whatever'] to apply CSS classes, but how do I go so that the main outlet style is 100% of the page?

Things I tried:

• Creating an application view, however it is still wrapped in the main exit code.
• Using rootElement in Ember.Application.create ({}); to indicate a stylized element, however, it just inserts a child view where all my content goes 100% and creates a parent div with the same problem, only one level deeper.
• Creating an application view and styling it in the same way that I am developing IndexView.

I tried to research this, and it's hard for me to understand what ideas? I have to skip something simple, because every time I understand something, I understand that I analyzed it too much or made Amber do something in such a way that it would not have to be done.

Answer 1

you can use ApplicationView to create your main div ...

 App.ApplicationView = Ember.View.extend({ classNames: ['test'] }); 

See http://jsbin.com/uxojek/5/edit

  <div id="ember156" class="ember-view test"> <script id="metamorph-0-start" type="text/x-placeholder"></script><div id="ember164" class="ember-view indexViewClass"> This is the index view </div><script id="metamorph-0-end" type="text/x-placeholder"></script> </div> 

Answer 2

any alternatives to Ember.View because it is deprecated and will be removed in ember 2

Answer 3

To create the main look of the application, you can actually use your own ApplicationView for Ember.

 App.ApplicationView = Ember.View.extend({ classNames: ['hello-world'] });