2

我正在尝试使用 CompositeView 和 ItemView 呈现引导导航列表。我需要生成的 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"
});
4

2 回答 2

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"
});
于 2013-05-15T10:38:30.253 回答
0

编辑：

感谢您发布意见。我看到了你正在尝试做的事情的形状。我不确定您的方法是否适用于多个方面组，而无需定义自定义 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 来构建它会容易得多。

于 2013-05-03T12:48:03.413 回答