在Ember中为主要插座设置样式

dea*_*ten 4 css outlet ember.js

我有一个布局,要求主插座是页面高度的100%.

这是一个JSFiddle,显示了我遇到的问题.我可以通过classNames属性创建索引视图并为其分配css类,但总是存在我不理解如何设置样式的root div.

http://jsfiddle.net/kgnQz/

这是jsfiddle身体的样子

<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>
Run Code Online (Sandbox Code Playgroud)

通常,当我创建一个视图时,我可以提供classaNames:['whatever']来应用CSS类,但是我如何将主要插座设置为100%的页面?

我尝试过的事情:

  1. 创建应用程序视图,但它仍然由主要出口代码包装.
  2. 在Ember.Application.create({})中使用rootElement; 指定一个样式元素,但是只插入一个子视图,其中我的所有内容都是100%并创建一个具有相同问题的父div,只有一个级别更深.
  3. 以与构建IndexView相同的方式创建应用程序视图和样式.

我尝试过研究这个问题,这对我来说很难找到......任何想法?我必须错过一些简单的东西,因为每当我想出一些事情,我都会意识到我过度分析它或强迫Ember以某种方式做某事并不意味着要完成.

小智 10

Ember.View的任何替代品,因为它已弃用,将在ember 2中删除


sel*_*gsz 6

你可以使用ApplicationView来设计主要的div ...

App.ApplicationView = Ember.View.extend({
  classNames: ['test']
});
Run Code Online (Sandbox Code Playgroud)

请参阅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>
Run Code Online (Sandbox Code Playgroud)