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.

by chrisfrisina

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>
    <div id="measure-container"></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 'representation' Views: <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 add-rep">Add a rep</div>
      </div>
  </div>
</script>

<script type="text/template" id="rep-template">
  <div class="rep" id="rep<%=this.model.identifier%>">
      I am a repView <br/>
      My ID is '<%=this.identifier%>' <br/>
      My type is '<%=this.model.get('type')%>' <br/>
      I have this many beats '<%=this.model.get('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 btn-primary add-beat">Add a beat</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;
}

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
  },
  shim: {
    underscore: { exports: "_" },
    backbone: { deps: ["underscore", "jquery"], exports: "Backbone" }, 
    stickit: { deps: ["backbone"] }
  }
});

// our representation, which contains everything Backbone relating to the 'representation'
define("representation", ["jquery", "underscore", "backbone"], function($, _, Backbone) {
  var representation = {};

  //The model for our representation
  representation.Model = Backbone.Model.extend({
    initialize: function(options) {
      this.identifier = options.identifier;
      this.type = options.type;
      //Not sure why we have to directly access the numOfBeats by .attributes, but w/e
      //this.numOfBeats = options.parentModel.get('numOfBeats');
      this.numOfBeats = options.numOfBeats;
    }
  });  
  
  //The collection for our representations
  representation.Collection = Backbone.Collection.extend({
    model: representation.Model,
    initialize: function(){
    }
  });

  //A view for our representation
  representation.View = Backbone.View.extend({
    events: {
      'click .remove-rep' : 'removeRepresentation',
      'click .toggle-rep' : 'toggleRepType',
      'click .add-beat' : 'addBeat'
    },
    initialize: function(options) {
      if(options.model){this.model=options.model;}
      //This is where you are going to have to put event handlers/listeners
      //here and such
      this.model.on('change', this.render, this);
      //this.model.on('destroy', this.remove, this);
    },
    render: function(){
      this.identifier = 'rep' + this.model.identifier;
      // this.$el is a shortcut provided by Backbone to get the jQuery selector HTML...