Question

尝试将每个measureView的渲染及其子节点（beatView（s））嵌套在同一个measureView.js文件中。我们使用require.js进行路径定义，因此请原谅一些未定义的var名称。问题出现在嵌套的_.each方法中的measuresView.js中，new BeatView()返回Uncaught TypeError: undefined is not a function。我们尝试从第一个new BeatView()之外手动调用_.each function，以确保它没有确定require.js BeatView变量的范围，但是使用它会得到相同的错误：（new BeatView({model:this.component.models[0].get('beats').models[0], el:this.el}); ）。使用嵌套_.each与范围界定或其他我缺少的东西有什么特别之处吗？

measuresView.js： jsfiddle of complete 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'),

...

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;
},

beatView.js： jsfiddle of complete code

render: function(){
  var compiledTemplate = _.template(this.representations[this.currentBeatRepresentation], {beat: this.model, beatAngle: this.beatAngle});
  $(this.el).append(compiledTemplate);
  return this;
},

其他信息：

骨干结构：

Component (basically an instrument)
  ↳ A collection of Measure(s)
    ↳ Measure
      ↳ A collection of Beat(s)
        ↳ Beat

击败模特：

//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;
});

击败收藏：

//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();
});

衡量模型：

//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;
});

衡量集合：

//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(){
    }
  });
});

内部错误：

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
....

外部错误：

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
....

Underscore使用Backbone Views嵌套每个循环

0 个答案: