1

尝试将每个 measureView 及其子项（beatView(s)）的渲染嵌套在同一个 measureView.js 文件中。我们使用 require.js 来定义路径，所以请原谅一些未定义的 var 名称。问题出在 measureView.js 中，在嵌套的 _.each 方法中，作为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}); ）得到了同样的错误。使用带有作用域的嵌套 s 有什么特别之处_.each，还是我缺少的其他东西？

measureView.js ： 完整代码的jsfiddle

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

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

0 回答 0