«Групповые» детские образы в ContainerView

Question

Я создаю динамическую панель мониторинга и в настоящее время пытаюсь добиться этого с помощью ContainerView и childViews для виджетов. Что я хочу сделать сейчас, это группа, или, скорее, обертка div вокруг подмножества дочерних элементов. Чтобы дать правильный пример: Так позволяет сказать, что я создаю 4 childviews

App.IndexView = Ember.ContainerView.extend({ 
    classNames: ['dashboard'], 
    childViews: ['LinechartView', 'TableView', 'BarchartView', 'TabletwoView'], 
    ... 

Так что хорошо работает, как ожидалось, и он просто создает 4 дивы вокруг каждого. Но то, что я хочу сделать сейчас, помещается div вокруг первых двух и вторых двух, поэтому я могу поместить их в одну и ту же «строку» (используя загрузку). Я прав, думая, что мне нужно создать дочернее представление для каждой строки, это еще одна информация о содержании, в которой каждый элемент или столбцы являются дочерними? Или есть более простой способ?

Чтобы уточнить, в настоящее время структура DOM выглядит следующим образом:

<div id="ember308" class="ember-view dashboard"> 
    <div id="ember311" class="ember-view">LinechartView</div> 
    <div id="ember314" class="ember-view">TableView</div> 
    <div id="ember317" class="ember-view">BarChartView</div> 
    <div id="ember320" class="ember-view">TabletwoView</div>  
</div> 

, и я хочу, чтобы мой DOM Структура будет так:

<div id="ember308" class="ember-view dashboard"> 
    <div class="row"> 
     <div id="ember311" class="ember-view span6">LinechartView</div> 
     <div id="ember314" class="ember-view span6">TableView</div> 
    </div> 
    <div class="row"> 
     <div id="ember317" class="ember-view span6">BarChartView</div> 
     <div id="ember320" class="ember-view span6">TabletwoView</div> 
    </div> 
</div> 

Это больше о оберточной строку вокруг взглядов а не дополнительные классы span6. Никакой помощи не очень ценится. Приветствия.

Answer 1

Update: После вложенными containerview получает комплекс очень быстро - у вас есть 3x2 сетки, а затем пользователь изменяет размер окна, а теперь вы хотите, чтобы показать 4 в верхнем ряду и 2 на втором ряду - это больно, если вы используете вложенные представления контейнеров для строк.

Если вы хотите, чтобы содержимое панели инструментов динамически менялось в зависимости от того, что хочет пользователь (т. Е. Некоторые из них имеют 3 виджета, некоторые из них имеют 15, можно перетаскивать, чтобы переупорядочить), я думаю, что имеет смысл придерживаться с одним слоем containerview, а затем используйте CSS для их стилизации в сетку. Вы можете «имитировать» квадратную сетку, в то время как ваш основной DOM на самом деле является списком divs: вот пример: http://yaleclassroulette.com/. Это использует библиотеку изотопов: http://isotope.metafizzy.co/index.html.

Оригинал: Хотя ваше решение (создание вложенной containerviews, то innerones для строк) будет работать, мне очень интересно, почему вам нужен вид контейнера.

Считаете ли вы, что вы просматриваете вид контейнера и вместо этого делаете макет в шаблоне? Так что измените App.IndexView от ContainerView до вида, подкрепленного шаблоном, который вы можете создать по своему вкусу, и заполните его дочерние представления, используя {{outlet}} или {{view}}.

Пример:

index_view.js:

App.IndexView = Ember.View.extend({ 
    templateName: "index.hbs" 

index.hbs:

<div class="row1"> 
    {{view App.LinechartView stuffBinding="whatever.you.need.for.initialization"}} 
    {{view App.TableView stuffBinding="whatever"}} 
</div> 
<div class="row2"> 
    {{view App.BarchartView stuffBinding="whatever"}} 
    {{view App.TabletwoView stuffBinding="whatever"}} 
</div> 

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

Answer 2

Всякий раз, когда вы хотите иметь вторичный шаблон, обернутый вокруг основного шаблона, вы можете использовать свойство layout.

http://emberjs.com/api/classes/Ember.View.html, а затем перейдите в макет, чтобы проверить API.

Используйте свойство layoutName, чтобы оно поддерживалось шаблоном.