The browser draws a Marionette.LayoutView form, which contains a collection of Marionette.CollectionView of five models. Template code:

<script type="text/html" id="main-layoutview"> <div class="collection_content"></div> </script>

Presentation Code:

 var View = Mn.LayoutView.extend({ template: $(html).filter('#main-layoutview')[0].outerHTML, regions: { collectioncontent: '.collection_content' }, onRender: function() { this.getRegion('collectioncontent').show(this.collectionview); } }

Now I need to duplicate this collection to another form with a different style and other elements around. A new form can only be called from the first. I am making a new html template:

 <script type="text/html" id="legend-form"> <div class="leg_content"></div> </script>

and add to the View function

 openLegend: function(collectionView) { var LegendLayout = Mn.LayoutView.extend({ template: $(legend_html).filter('#legend-form')[0].innerHTML, regions: { 'legendcontent': '.leg_content', }, }); var colview2 = new Marionette.CollectionView({ collection: collectionView.collection, childView: ItemView }); var Legends = new LegendLayout(); Legends.render(); Legends.showChildView('legendcontent', colview2); return Legends; },

what is the client part on the line Legends.showChildView('legendcontent', colview2); swears:

 message:"An "el" .leg_content must exist in DOM"

That is, you can not create a view inside another view? I can't find it in the documentation. And what should I do if both collections are to be connected, that is, when changing in one collection, you need to change the second one?

    1 answer 1

    To duplicate these collections to another form, you do not need to create a new template. You need to add a new <div> to the existing template, wrapping it in the <form></form> .

     <script type="text/html" id="main_layoutview"> .... существующий темплейт <form class="leg_form" style="display:none;..."> <div class="leg_content"></div> </form> </script>

    And add a new region to the existing LayoutView :

     var View = Mn.LayoutView.extend({ template: $(html).filter('#main_layoutview')[0].outerHTML, regions: { legendcontent: '.legend_content', // существующий регион legend2content: '.leg_content' // новый регион }, .... openLegend: function(collectionView) { this.ui.leg_form.css('display','inline'); var colview = new Mn.CollectionView({ emptyView: collectionView.emptyVview, collection: collectionView.collection, childView: LegendItem }); this.legend2content.show(colview); },

    Now, if necessary, you can display a new view in the region, and it will be displayed on a different form according to the styles customized in the template.