Marionette CompositeView - изменение шаблона каждый n-й элемент

Question

Я использую Marionette некоторое время, но я не уверен, как я могу делать то, что хочу, простым способом.

У меня есть композиционный вид, что делает что-то вроде этого:

<div class="row"> 
    <div class="col-xs-12"> 
    <div id="items"></div> 
    </div> 
</div> 

Каждый мой пункт визуализируется как:

<div class="col-xs-3">foo</div> 

Проблема здесь заключается, в том, что каждые 4 шт , Я хочу сделать новую строку, так что все довольно красиво и не испортит интервал сетки бутстрапа.

В общем, если я просто сделать их, как они есть, это будет происходить:

<div class="row"> 
    <div class="col-xs-12"> 
    <div id="items"> 
     <div class="col-xs-3">foo</div> 
     <div class="col-xs-3">foo</div> 
     <div class="col-xs-3">foo</div> 
     <div class="col-xs-3">foo</div> 
     <div class="col-xs-3">foo</div> 
     <div class="col-xs-3">foo</div> 
     <div class="col-xs-3">foo</div> 
     <div class="col-xs-3">foo</div> 
    </div> 
    </div> 
</div> 

Как вы можете видеть, это разбивает самозагрузки, потому что у нас есть много более 12 сетки пространства в этом пункте дивы.

Что я хочу:

<div class="row"> 
    <div class="col-xs-12"> 
    <div id="items"> 
     <div class="col-xs-3">foo</div> 
     <div class="col-xs-3">foo</div> 
     <div class="col-xs-3">foo</div> 
     <div class="col-xs-3">foo</div> 
    </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-xs-12"> 
    <div id="items"> 
     <div class="col-xs-3">foo</div> 
     <div class="col-xs-3">foo</div> 
     <div class="col-xs-3">foo</div> 
     <div class="col-xs-3">foo</div> 
    </div> 
    </div> 
</div> 

Что такое WASY способ добиться этого эффекта? У меня должно быть представление для строк и просмотр коллекции строк и представления для каждого элемента? Это просто слишком много неприятностей.

Answer 1

Вы можете использовать childViewOptions Collection/CompositeView, который принимает функцию. Из CompositeView вы можете пройти шаблон, который вам нужен. Так, например:

childViewOptions: function() { 
    var template = defaultTemplate; 
    if (++this.childCount % 4 == 0) 
     // 3 children have been rendered, this one is the 4th 
     template = fourthTemplate; 
    return { 
     template: template 
    } 
} 

где this.childCount это свойство вашего CompositeView, и должны быть инициализированы где-то.

initialize: function() { 
    this.childCount = 0; 
} 

Если вы не хотеться, чтобы загрязнить ваш взгляд с дополнительными опорами, вы можете подсчитать количество детей с тяжелой DEP Няни марионетки, которая управляет коллекцией/дети CompositeView в:

childViewOptions: function() { 
    var template = defaultTemplate; 
    if ((this.children.length + 1) % 4 == 0) 
     // 3 children have been rendered, this one is the 4th 
     template = fourthTemplate; 
    return { 
     template: template 
    } 
} 

Answer 2

Я бы сказал, переопределить attachHtml, чтобы достичь этого. Он вызывается с текущим представлением, прикрепляется дочерний элемент и индекс, который имеет вид в коллекции.

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

Удостоверьтесь, что вы понимаете, как реализация по умолчанию attachHtml имеет дело с буферизацией, прежде чем вы напишите свой собственный.