JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://requirejs.org/docs/release/2.1.5/comments/require.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
JavaScript
// Filename: views/measures/measuresView.js
/*
This is the MeasuresView.
This is contained in a ComponentsView.
*/
define([
'jquery',
'underscore',
'backbone',
'backbone/collections/measures',
'backbone/views/beats/beatView',
'text!backbone/templates/measures/audioMeasures.html',
'text!backbone/templates/measures/linearBarMeasures.html',
'text!backbone/templates/measures/linearBarSVGMeasures.html',
'text!backbone/templates/measures/circularPieMeasures.html',
'app/dispatch',
'app/state',
'app/log'
], function($, _, Backbone, MeasuresCollection, beatView, audioMeasuresTemplate, linearBarMeasuresTemplate, linearBarSVGMeasuresTemplate, circularPieMeasuresTemplate, dispatch, state, log){
return Backbone.View.extend({
el: $('.component'),
// The different representations
representations: {
"audio": audioMeasuresTemplate,
"linear-bar": linearBarMeasuresTemplate,
"linear-bar-svg": linearBarSVGMeasuresTemplate,
"circular-pie": circularPieMeasuresTemplate
},
currentMeasureRepresentation: 'linear-bar',
//registering click events to add and remove measures.
events : {
'click .addMeasure' : 'add',
'click .delete' : 'remove'
},
initialize: function(options){
//if we're being created by a componentView, we are
//passed in options. Otherwise we create a single
//measure and add it to our collection.
if (options) {
this.component = options.collection;
this.parent = options.parent;
this.el = options.el;
} else {
this.measure = new BeatsCollection;
for (var i = 0; i < 4; i++) {
this.measure.add();
}
this.component = new MeasuresCollection;
this.component.add({beats: this.measure});
}
if (options["template-key"]) {
this.currentBeatRepresentation = options["template-key"];
}
//registering a callback for signatureChange events.
...