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
Post a Comment