Как использовать коллекцию и другую модель одновременно для шаблона типа списка в марионетке + рельсы

Question

Надеюсь, что вы будете знать, как использовать коллекцию и модель одновременно в Магиотеке + Rails.

В настоящее время мой шаблон jst.eco имеет формат ниже.

<div class=""> 
<div class="col-sm-6 col-md-4"> 
    <div class="form-group"> 
    <h2 class="group_title" data-toggle="tooltip" data-placement="left" title="This is for first group checking of user">Group 1</h2> 
    <div class="clear"></div> 

    <div class="checkbox"> 
     <label><input type="checkbox" name="group_1_1" value="" <%= @group_checker(@model1.group_1) %>>Lorem ipsum</label> 
    </div> 
    <div class="checkbox"> 
     <label><input type="checkbox" name="group_1_2" value="" <%= @group_checker(@quotient) %>>Sit dolor amet</label> 
    </div> 
    <div class="checkbox"> 
     <label><input type="checkbox" name="group_1_3" value="" <%= @group_checker(@quotient) %>>Consectetur odipisicing</label> 
    </div> 
    <div class="checkbox"> 
     <label><input type="checkbox" name="group_1_4" value="" <%= @group_checker(@quotient) %>>Elit sed do ejusmod</label> 
    </div> 
    <div class="checkbox"> 
     <label><input type="checkbox" name="group_1_5" value="" <%= @group_checker(@quotient) %>>Tempor incididunt ut labore</label> 
    </div> 
    </div> 

    <div class="form-group"> 
    <h2 class="group_title" data-toggle="tooltip" data-placement="left" title="This is for 2nd group checking of user">Group 2</h2> 
    <div class="clear"></div> 
    <div class="checkbox"> 
     <label><input type="checkbox" name="group_2_1" value="" <%= @group_checker(@model1.group_2) %>>Et dolore magna aliquo.</label> 
    </div> 
    <div class="checkbox"> 
     <label><input type="checkbox" name="group_2_2" value="" <%= @group_checker(@quotient) %>>Ut enim ad minim veniam</label> 
    </div> 
    <div class="checkbox"> 
     <label><input type="checkbox" name="group_2_3" value="" <%= @group_checker(@quotient) %>>Quis nostrud exercitation</label> 
    </div> 
    </div> 
</div> 
<div class="col-sm-6 col-md-4"> 
    <div class="form-group"> 
    <h2 class="group_title" data-toggle="tooltip" data-placement="left" title="This is for 3rd group checking of user">Group 3</h2> 
    <div class="clear"></div> 
    <div class="checkbox"> 
     <label><input type="checkbox" name="group_3_1" value="" <%= @group_checker(@model1.group_3) %>>ut aliquip</label> 
    </div> 
    <div class="checkbox"> 
     <label><input type="checkbox" name="group_3_2" value="" <%= @group_checker(@quotient) %>>ex ea commodo</label> 
    </div> 
    <div class="checkbox"> 
     <label><input type="checkbox" name="group_3_3" value="" <%= @group_checker(@quotient) %>>consequat</label> 
    </div> 
    </div> 

    <div class="form-group"> 
    <h2 class="group_title" data-toggle="tooltip" data-placement="left" title="This is for other group checking of user">Others</h2> 
    <div class="clear"></div> 
    <div class="checkbox"> 
     <label><input type="checkbox" name="group_4_1" value="" <%= @group_checker(@model1.group_4) %>>Duis aute irure</label> 
    </div> 
    <div class="checkbox"> 
     <label><input type="checkbox" name="group_4_2" value="" <%= @group_checker(@quotient) %>>dolor in reprehenderit</label> 
    </div> 
    <div class="checkbox"> 
     <label><input type="checkbox" name="group_4_3" value="" <%= @group_checker(@quotient) %>>in voluptate</label> 
    </div> 
    <div class="checkbox"> 
     <label><input type="checkbox" name="group_4_4" value="" <%= @group_checker(@quotient) %>>velit esse</label> 
    </div> 
    <div class="checkbox"> 
     <label><input type="checkbox" name="group_4_5" value="" <%= @group_checker(@quotient) %>>cilium dol</label> 
    </div> 
    </div> 
</div> 

И мой взгляд, для этого шаблона ниже.

class Step1.Fields extends App.Views.ItemView 
    template: "wizard/edit_fields" 

    serializeData: -> 
     { 
      model1: @model.toJSON() # record model 
      model2: @options.model2.toJSON() # tabs collection planned 
     } 

    form: 
     focusFirstInput: false 

    templateHelpers: -> 
     { 

      group_checker: (value) -> 
       @quotient = Math.floor value/2 
       remainder = value % 2 
       return "checked" if remainder == 1 
       "" 
     } 

Результат этого шаблона выглядит следующим образом.

И я планировал заменить повторяющийся код, поэтому я создал коллекцию вкладок, которая содержит метки флажков, такие как «Lorem Ipsum», «Dolor сидеть Амет».

Формат модели вкладки представлен ниже.

group_id: 1, ID: 1, order_in_group: 1, название: "Lorem Ipsum"

А также есть запись модель, которая содержит информацию о группе, чтобы решить статус Флажки полностью.

Обратите внимание, что в нем содержится информация о группе как этот формат json.

1 группе => 25, group_2 => 30, group_3 => 35, group_4 => 27

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

И обратите внимание, что по причине стиля это не просто повторение, но содержит разделение col-sm-x с 2 группами на столбец.

Итак, у меня настоящая дилемма.

Похоже, что это не приемлемо для CollectionView, поэтому я подумал об использовании CompositeView в Marionette, но я не мог себе представить, как обрабатывать коллекцию вкладок и модель записи одновременно, чтобы написать шаблон с тем же, что и предыдущий.

Пожалуйста, помогите мне !!!

Answer 1

CompositeView - это ваш ответ здесь, поскольку вы уже были частично на пути к этому.

Ваша коллекция/модель относится только к данным, поэтому это не имеет значения. Пока в вашем представлении содержится весь пользовательский интерфейс и соответствующий шаблон для каждой отдельной модели в коллекции, и у вас есть шаблон для коллекции, вы можете отображать их в нескольких регионах, указанных в CompositeView. Задайте childView классу вашего вида модели и childViewContainer тому элементу, который вы хотите визуализировать внутри, в этом случае выглядит так, как будто div.form-class - это тип элемента, в котором отображаются ваши просмотры/модели вашего ребенка.