RE: [Backbone.Marionette] Display Bootstrap Navigation

[Robert Levy]

Show us your code.  What is it doing vs what you expect?

---

From: Sudha Subramanian
Sent: ‎3/‎16/‎2014 8:15 PM
To: backbone-...@googlegroups.com
Subject: [Backbone.Marionette] Display Bootstrap Navigation

I've been trying to display a bootstrap navbar using Marionette with no success. I took one of the example navbar with a divider and drop-down. Following is the html I'm trying to display using Marionette.

I extended the region class of marionette to append the left and right nav elements as separate views. How can I display something like this esp the divder etc. Can someone please suggest an approach?
 

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

--
You received this message because you are subscribed to the Google Groups "Backbone.Marionette" group.
To unsubscribe from this group and stop receiving emails from it, send an email to backbone-marion...@googlegroups.com.
To post to this group, send email to backbone-...@googlegroups.com.
Visit this group at http://groups.google.com/group/backbone-marionette.
To view this discussion on the web visit https://groups.google.com/d/msgid/backbone-marionette/b2215dff-b583-4f0c-825f-a831f9086f7c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Sudha Subramanian]

This is my html and view. I managed to display the left and right menu item by appending the layout to a 'headerRegion' defined in my app.js. I extended the Region.js to accept a boolean to know if I should append or clear the view. So, that way I append the left and right views ( LeftHeaders and RightHeaders ) in the code below. But, I'm not sure how I can get the drop-down displayed.  Is this approach correct?

  SampleManager.module("HeaderApp.List", function(List, SampleApp, Backbone, Marionette, $, _){

    List.HeaderLayout = Backbone.Marionette.Layout.extend({
        template:"#header-layout",
        regions:{
            headerMenuRegions:{
                selector:"#headerMenuRegions"
                ,appendViews:true
            }
        },
        tagName:"div",
        className:"container-fluid"
    });

    List.Header = Backbone.Marionette.CompositeView.extend({
        template: "#header-item",
        tagName:"li"
    });

    List.LeftHeaders = Backbone.Marionette.CollectionView.extend({
        itemView:List.Header,
        tagName:"ul",
        className:"nav navbar-nav"
    });

    List.RightHeaders = Backbone.Marionette.CollectionView.extend({
        itemView:List.Header,
        tagName:"ul",
        className:"nav navbar-nav navbar-right"
    });
});



<div class="container">

    <!-- Static navbar -->
    <div id="header-region" class="navbar navbar-default" role="navigation">
    </div>

    <!-- Main component for a primary marketing message or call to action -->
    <div class="jumbotron">
        <h1>Navbar example</h1>
        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
        <p>
            <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
        </p>
    </div>

</div> <!-- /container -->

<script type="text/template" id="header-layout">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Project name</a>
            </div>
            <div class="navbar-collapse collapse"  id="headerMenuRegions">
            </div><!--/.nav-collapse -->
</script>


<script type="text/template" id="header-item">
    <a href="#"><%=headerMenu%></a>
</script>


Thanks.