Question

我一直试图使用Marionette显示一个bootstrap导航栏但没有成功。我使用分隔符和下拉列表中的一个示例导航栏。以下是我试图使用Marionette显示的HTML。

我扩展了木偶的区域类，将左右导航元素作为单独的视图附加。我怎样才能展示像这样的东西，特别是对于等等。有人可以建议一种方法吗？

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
            </ul>
        </li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="./">Default</a></li>
        <li><a href="../navbar-static-top/">Static top</a></li>
        <li><a href="../navbar-fixed-top/">Fixed top</a></li>
    </ul>
</div><!--/.nav-collapse -->

Answer 1

要渲染一些html，您应该使用one of Marionette view而不是区域。 Marionette.Region的目的不是呈现某些HTML，而是表示可以插入其他视图的位置。

如果您需要渲染静态html，可以使用Marionette.ItemView。这是example

但是如果你想动态创建导航栏，你应该使用更复杂的解决方案，包括模型，集合和更复杂的视图。

使用Marionette的Bootstrap导航栏

1 个答案: