Question

我正在尝试使用CompositeView和ItemView呈现Bootstrap导航列表。我需要生成的html类似于

<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>

要做到这一点，我有3个主干视图 -

<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。

然而，当渲染时，我会在vw-search-facet-group视图周围获得额外的div

<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>

我可以理解这种情况正在发生，因为vw-search-facet-group视图需要一个容器来进行渲染，因此默认情况下会创建一个div，但这是不可取的。

如何更改此选项以删除那些额外的div？

由于

更新查看定义

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"
});

Answer 1

最后，我走了另一条路。我没有让父组合视图包含ul，而是将其更改为一个简单的div，然后让每个子组件使用ul作为其容器。

<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>

更新的视图定义

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"
});

Answer 2

修改

感谢您发布观看次数。我看到你要做的事情的形状。我不确定您的方法是否适用于多个构面组而不定义自定义AppendHtml方法以将项目视图添加到内部复合视图中。

Reservations.SearchFacetGroupView = Marionette.CompositeView.extend({ template: "#vw-search-facet-group", itemView: Reservations.SearchFacetView, appendHtml: function(collectionView, itemView, index){ collectionView.$("li").last().after(itemView.el); } });

您是否对多个小组进行了测试？

此外，使用带有多个标题的单个ul是否有充分理由？使用单独的ul为每个组构建它会容易得多。

Backbone Marionette CompositeViews显示额外的div标签

2 个答案: