title: Underscore nested each loops with Backbone Views
body: <p>Trying to nest the rendering of each measureView, and its children (the beatView(s)) in the same measureView.js file.   We are using require.js for path definitions, so forgive some of the undefined var names.   The problem is in measuresView.js, in the nested _.each method, as the <code>new BeatView()</code> returns <code>Uncaught TypeError: undefined is not a function</code>.   We tried manually calling the <code>new BeatView()</code> from outside the first <code>_.each function</code> to make sure that it wasn't scoping of the require.js BeatView variable, but got the same error using this: (<code>new BeatView({model:this.component.models[0].get('beats').models[0], el:this.el});
  </code>).   Is there something special to using nested <code>_.each</code>s with scoping, or something else I am missing?</p>
  
  <p>measuresView.js:
  <a href="http://jsfiddle.net/chrisfrisina/MnFDR/" rel="nofollow">jsfiddle of complete code</a></p>
  
  <pre><code>define([
    'jquery',
    'underscore',
    'backbone',
    'backbone/collections/beats',
    '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, BeatsCollection, MeasuresCollection, BeatView, audioMeasuresTemplate, linearBarMeasuresTemplate, linearBarSVGMeasuresTemplate, circularPieMeasuresTemplate, dispatch, state, log){
    return Backbone.View.extend({
      el: $('.component'),
  </code></pre>
  
  <p>...</p>
  
  <pre><code>render: function(){
    //we create a measuresView for each measure.
    _.each(this.component.models, function(measure) {
      var compiledTemplate = _.template( this.representations[this.currentMeasureRepresentation], {measure: measure, measureAngle: 360.0 } );
      $(this.el).append( compiledTemplate );
         //we create a beatView for each beat in the measure.
          _.each(measure.get('beats').models, function(beat) {
            new BeatView({model:beat, el:this.el});
          }, this);
    }, this);
   return this;
  },
  </code></pre>
  
  <p>beatView.js :
  <a href="http://jsfiddle.net/chrisfrisina/b4yRA/" rel="nofollow">jsfiddle of complete code</a></p>
  
  <pre><code>render: function(){
    var compiledTemplate = _.template(this.representations[this.currentBeatRepresentation], {beat: this.model, beatAngle: this.beatAngle});
    $(this.el).append(compiledTemplate);
    return this;
  },
  </code></pre>
  
  <p>Additional Info:</p>
  
  <p>Backbone Structure:</p>
  
  <pre><code>Component (basically an instrument)
    ↳ A collection of Measure(s)
      ↳ Measure
        ↳ A collection of Beat(s)
          ↳ Beat
  </code></pre>
  
  <p>beat Model:</p>
  
  <pre><code>//filename: models/beat.js
  /*
    This is the beat model.
    It only knows about whether or not it
    is selected.
  */
  define([
    'underscore',
    'backbone'
  ], function(_, Backbone) {
    var beatModel = Backbone.Model.extend({
      defaults: {
        selected: false,
        state: 'OFF'
      },
      initialize: function(){
      },
      getStyleClass: function() {
        if (this.selected) {
          return 'ON';
        }
        else {
          return 'OFF';
        }
      }
    });
    return beatModel;
  });
  </code></pre>
  
  <p>beat collection:</p>
  
  <pre><code>//Filename: collections/beats.js
  /*
    This is the beats collection.
    It is a collection of beat models.
  */
  define([
    'jquery',
    'underscore',
    'backbone',
    'backbone/models/beat'
  ], function($, _, Backbone, beatModel){
    return Backbone.Collection.extend({
      model: beatModel,
      initialize: function(){
      }
    });
    //return new beatsCollection();
  });
  </code></pre>
  
  <p>measure model :</p>
  
  <pre><code>//filename: models/measure.js
  /*
    This is the measure model.
    A component has a collection of these models.
    these models have a collection of beats.
  */
  define([
    'underscore',
    'backbone',
    'backbone/collections/beats'
  ], function(_, Backbone, beatsCollection) {
    var measureModel = Backbone.Model.extend({
      defaults: {
        label: '0/4',
        beats: beatsCollection,
        numberOfBeats: 0,
        divisions: 8
      },
      initialize: function(){     
      }
    });
    return measureModel;
  });
  </code></pre>
  
  <p>measure collection :</p>
  
  <pre><code>//filename collections/measures.js
  /*
    This is the measures collection.
    It is a collection of measure models.
  */
  define([
    'jquery',
    'underscore',
    'backbone',
    'backbone/models/measure'
  ], function($, _, Backbone, measureModel){
    return Backbone.Collection.extend({
      model: measureModel,
      initialize: function(){
      }
    });
  });
  </code></pre>
  
  <p>Inside error:</p>
  
  <pre><code>Uncaught TypeError: undefined is not a function measuresView.js:100
  (anonymous function) measuresView.js:100
  _.each._.forEach underscore.js:78
  (anonymous function) measuresView.js:96
  _.each._.forEach underscore.js:78
  Backbone.View.extend.render measuresView.js:88
  Backbone.View.extend.initialize measuresView.js:72
  Backbone.View backbone.js:1236
  child backbone.js:1467
  Backbone.View.extend.render componentView.js:63
  Backbone.View.extend.initialize componentView.js:54
  Backbone.View backbone.js:1236
  child backbone.js:1467
  (anonymous function) componentsView.js:201
  _.each._.forEach underscore.js:78
  Backbone.View.extend.render componentsView.js:192
  Backbone.Router.extend.newSong router.js:42
  (anonymous function) backbone.js:967
  (anonymous function) backbone.js:1164
  _.some._.any underscore.js:207
  _.extend.loadUrl backbone.js:1162
  _.extend.start backbone.js:1128
  initialize router.js:157
  initialize SOF.js:15
  ....
  </code></pre>
  
  <p>Outside error:</p>
  
  <pre><code>Uncaught TypeError: undefined is not a function measuresView.js:86
  Backbone.View.extend.render measuresView.js:86
  Backbone.View.extend.initialize measuresView.js:72
  Backbone.View backbone.js:1236
  child backbone.js:1467
  Backbone.View.extend.render componentView.js:63
  Backbone.View.extend.initialize componentView.js:54
  Backbone.View backbone.js:1236
  child backbone.js:1467
  (anonymous function) componentsView.js:201
  _.each._.forEach underscore.js:78
  Backbone.View.extend.render componentsView.js:192
  Backbone.Router.extend.newSong router.js:42
  (anonymous function) backbone.js:967
  (anonymous function) backbone.js:1164
  _.some._.any underscore.js:207
  _.extend.loadUrl backbone.js:1162
  _.extend.start backbone.js:1128
  initialize router.js:157
  initialize SOF.js:15
  ....
  </code></pre>