2

CompositeView と ItemView を使用して Bootstrap Navigation リストをレンダリングしようとしています。生成する必要がある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);
    }
});

これを複数のファセット グループでテストしましたか?

また、複数の見出しを持つ 1 つの ul を使用する強力なケースはありますか? グループごとに個別の ul を使用してこれを構築する方がはるかに簡単です。

于 2013-05-03T12:48:03.413 に答える