Backbone Template

Standard fiddle

by Steven Senkus

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>
      <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <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="#">Bootstrap theme</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#contact">Contact</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...

CSS

body {
    padding-top: 70px;
    padding-bottom: 30px;
}

.theme-dropdown .dropdown-menu {
    display: block;
    position: static;
    margin-bottom: 20px;
}

.theme-showcase > p > .btn {
    margin: 5px 0;
} 

#myModal {
    background: url('//loomisadventures.com/sites/default/files/images/blog/illumination-rock-mount-hood-06-large-07.24.11.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}

#carousel0 {
    min-height: 325px;
    background-color: #000;
    
}

.slide0-content {
    min-height: 325px;  
    background-color: #f93!important;
    margin: 0!important;
    
}

JavaScript

var CarouselView = Backbone.View.extend({
        //el: '#carousel-inner',
        initialize: function() {
            this.render();
        },
        render: function() {
            var template = _.template($("#slide0-content").html(), {title: 'Slide 0 Title'});
            $('.item:eq(0)').html(template);
            $('#carousel0').carousel({
                interval: 5000,
                pause: 'hover'
            });

        },
        events: {
            'click #btnInfo': 'btnGetInfo',
            'click a.list-group-item': 'changeSlide'
        },
        btnGetInfo: function() {
            $('#myModal').modal({
                remote: 'modals/mountain.html'
            });
        },
        changeSlide: function(e) {
            var targetElem = $(e.currentTarget);
            console.log(targetElem);
            var listItemNum = targetElem.index();
            targetElem.addClass('active').siblings().removeClass('active');
            $('#carousel0').carousel(listItemNum);    
        }

    });

    var carousel = new CarouselView({el: $('#carousel-container')});