2013-05-31 3 views
4

У меня есть макет, который требует, чтобы основная розетка была на 100% от высоты страницы.Укладка основной розетки в Ember

Вот JSFiddle, показывающий проблему, с которой я сталкиваюсь. Я могу создать представление индекса и назначить ему классы css через свойство classNames, но всегда есть тот корень 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> 

Обычно, когда я создать представление, я могу предоставить classaNames: [ «любой»], чтобы применить классы CSS, но как я иду о том, чтобы стилизовать основную розетку на 100% страницы?

вещей я попытался:

  1. Создание вида приложения, однако она все еще обернута основным кодом выхода.
  2. Использование rootElement в Ember.Application.create ({}); чтобы указать стилизованный элемент, однако он просто вставляет дочерний вид, где весь мой контент идет на 100%, и создает родительский div с той же проблемой, только на один уровень глубже.
  3. Создание вида приложения и стилизации, которое таким же образом я разрабатываю IndexView.

Я пробовал исследовать это, и это сложно для меня выяснить ... любые идеи? Я должен пропустить что-то простое, потому что каждый раз, когда я что-то понимаю, я понимаю, что я слишком анализировал его или заставлял Эмбера делать что-то таким образом, что это не значит, что это нужно сделать.

ответ

6

вы можете использовать ApplicationView укладывать основной DIV ...

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

См 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> 
+0

Удивительный ... я должен быть перепутано что-то, когда я пытался, что, поскольку я обновил свой JSFiddle с ApplicationView и вуаля, работает ... спасибо. Вот обновленный JSFiddle со стилем, чтобы вы могли видеть его лучше http://jsfiddle.net/kgnQz/6/ – deadbabykitten

1

Для стилизации основного вида приложения вы можете предоставить свой собственный ApplicationView для Ember использовать.

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

любые альтернативы Ember.View, поскольку он является устаревшим и будет удален в уголек 2

Смежные вопросы