Backbone Marionette CompositeViews show extra div tags -


i'm trying render bootstrap navigation list using compositeview , itemview. html need generate like

<ul class="nav nav-list">   <li class="nav-header">list header</li>   <li class="active"><a href="#">home</a></li>   <li><a href="#">library</a></li>   ... </ul> 

to have 3 backbone views -

<script type="text/html" id="vw-search-facets">     <h4>filter by</h4>     <ul class="nav nav-list">      </ul> </script>  <script type="text/html" id="vw-search-facet-group">     <li class="nav-header"><%= name %></li> </script>  <script type="text/html" id="vw-search-facet">     <a href="#" id="<%= value %>"><%= name %> (<%= count %>)</a> </script> 

vw-search-facets , vw-search-facet-group compositeviews, vw-search-facet itemview.

however, when rendered divs around vw-search-facet-group view

<ul class="nav nav-list"> <div>             <li class="nav-header">city</li>     <li><a href="#" id="athens">athens (9)</a></li>     <li><a href="#" id="jackson">jackson (2)</a></li> </div> </ul> 

i can understand happening because vw-search-facet-group view needs container within render , default creates div, undesirable.

how can change remove divs?

thanks

update view definitions

reservations.searchfacetview = marionette.itemview.extend({     model: reservations.searchfacet,     template: '#vw-search-facet',     tagname: 'li' });  reservations.searchfacetgroupview = marionette.compositeview.extend({     template: "#vw-search-facet-group",     itemview: reservations.searchfacetview });  reservations.searchfacetslistview = marionette.compositeview.extend({     itemview: reservations.searchfacetgroupview,     itemviewcontainer: "ul.nav-list",     template: "#vw-search-facets" }); 

in end went down route this. instead of making parent composite view contain ul, changed simple div , made each child use ul container.

<script type="text/html" id="vw-search-facets"> <h4>filter by</h4> <div id="facet-list">  </div> </script>  <script type="text/html" id="vw-search-facet-group">     <li class="nav-header"><%= name %></li> </script>  <script type="text/html" id="vw-search-facet">     <a href="#" id="<%= value %>"><%= name %> (<%= count %>)</a> </script> 

and updated view definitions

reservations.searchfacetview = marionette.itemview.extend({     model: reservations.searchfacet,     template: '#vw-search-facet',     tagname: 'li' });  reservations.searchfacetgroupview = marionette.compositeview.extend({     template: "#vw-search-facet-group",     itemview: reservations.searchfacetview,     tagname: 'ul',     initialize: function () {         this.$el.addclass("nav").addclass("nav-list");     }, });  reservations.searchfacetslistview = marionette.compositeview.extend({     itemview: reservations.searchfacetgroupview,     itemviewcontainer: "#facet-list",     template: "#vw-search-facets" }); 

Comments

Popular posts from this blog

php - Why I am getting the Error "Commands out of sync; you can't run this command now" -

linux - Does gcc have any options to add version info in ELF binary file? -

java - Are there any classes that implement javax.persistence.Parameter<T>? -