Minimal RequireJS + Backbone

A relatively minimal setup using RequireJS and Backbone that shows how multiple `define`/`require` statements can use things returned from other `define`s.

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://requirejs.org/docs/release/2.1.2/minified/require.js"></script>

<h3>Measure View</h3>
<p>La la bing!</p>
<div class="input-append bootstrap-timepicker">
            <input id="timepicker1" type="text" class="input-small">
            <span class="add-on"><i class="icon-time"></i></span>
        </div>
    <div id="measure-container">
        <!-- Put a btn-primary or something similar here to add a rep, -->
        <!-- and igve it an event that adds one -->
        <!-- <div class="btn btn-primary add-beat">Add a beat</div> -->
        <!-- <div class="btn btn-danger">Remove a beat</div> -->
    </div>

<!-- Templates -->
<script type="text/template" id="instrument-template">
  <div class="instrument">
      I am an instrument. My name is <%=name%>. <br/>
      Here are my children repViews: <br/>
      <div id="measure-rep-container">
        <!-- Put a btn-primary or something similar here to add a rep, -->
        <!-- and igve it an event that adds one -->
        <div class="btn btn-primary test">Add a rep</div>
      </div>
  </div>
</script>

<script type="text/template" id="rep-template">
  <div class="rep" id="rep<%=this.model.id%>">
      I am a repView <br/>
      My ID is '<%=this.id%>' <br/>
      My type is '<%=this.model.type%>' <br/>
      I have this many beats '<%=this.model.numOfBeats%>' <br/>
      <div class="beatContainer"></div>
      <div class="btn btn-danger remove-rep" id="">Remove this rep</div>
      <div class="btn btn-primary toggle-rep" id="">Toggle rep type</div>
      <div class="btn sAlert">Show Alert</div>
  </div>
</script>

CSS

.instrument {
    border: 1px solid black;
    padding: 5px;
    margin: 5px;
}
.rep {
    border: 1px solid blue;
    padding: 5px;
    margin: 5px;
}
#measure-rep-container{
    border: 2px dashed green;
    padding: 5px;
    margin: 5px;
}
.bootstrap-timepicker-widget.dropdown-menu {
    z-index: 1050!important;
}

JavaScript

//Ignore this block, it helps us use RequireJS and backbone in this fiddle through shimming
require.config({
    paths: {
      jquery: "http://code.jquery.com/jquery.min", // currently 1.8.3
      underscore: "http://underscorejs.org/underscore-min",  // currently 1.4.3   
      backbone: "http://backbonejs.org/backbone-min", // currently 0.9.9
        timepicker: "http://github.com/jdewit/bootstrap-timepicker/js/bootstrap-timepicker.min"
    },
  shim: {
    underscore: { exports: "_" },
    backbone: { deps: ["underscore", "jquery"], exports: "Backbone" }, 
    timepicker: { deps: ["jquery"], exports: "timepicker" }, 
    stickit: { deps: ["backbone"] }
  }
});

// our measureModule, which contains everything Backbone relating to the 'measure'
define("measureModule", ["jquery", "underscore", "backbone", "timepicker"], function($, _, Backbone, timepicker) {
  var measureModule = {};
  //The model for our measure
  measureModule.Model = Backbone.Model.extend({
    initialize: function(options) {
      // You might want to put the number of beats here instead of making a child model
      // and view that is also a sibling to the repModule
      if(options.numOfBeats){this.numOfBeats = options.numOfBeats;}
    }
  });  

  //The view for our measure
  measureModule.View = Backbone.View.extend({
    el: $('#measure-container'),
    events: {
        'click .test': 'test'
    },
     
    test: function(){
      alert("Me");
    },
    initialize: function() {
//      this.setElement($('#measure-container'));
        
      this.template = _.template($('#instrument-template').html());
 
        console.log(timepicker);
  console.log($("#timepicker1"));
        //$('#timepicker1').timepicker();
        
      //this.listenTo(this.measureRepresentations, 'remove', _.bind(this.render, this));  
      //this.listenTo(this.measureRepresentations, 'add', _.bind(this.render, this));  
    },
    render: function(){
      // this is a weird way of creating the template. ...