骨干视图函数抛出TypeError：对象不是函数

Question

我有一个Backbone视图（下图），并且我正在创建一个新的嵌套子视图，就像渲染函数中的其他视图一样，但是我得到一个新的错误Uncaught TypeError: object is not a function 。我不确定它为什么抱怨，因为它是参数函数。即使不传入参数，我也会收到错误消息，并且它指向如下所述的新的DeleteInstrumentView的调用。我在调试时遇到了麻烦，因为我也不太清楚这个错误，并且不相信它是与语法相关的。

Here是完整的代码，如果由于某种原因您有兴趣。

define([ 
    … require paths … 
], function(… matching require names …){ 
    return Backbone.View.extend({ 
    el: $('.component'), 
    events : { 
     … event handlers … 
    }, 

    initialize: function(options){ 
     if (options) { 
     … make from passed in params 
     } else { 
     … make from scratch 
     } 

     … dispatch handlers … 

     this.render(); 
    }, 

    /* 
     This View does not have its own html rendering, but instead creates 
     a new children which render themselves. 
    */ 
    render: function(options){ 
     if(options) { 
     new MeasuresView({ 
      … params … 
     }); 
     } 
     else { 
     new MeasuresView({ 
      … params … 
     }); 

     new InstrumentDropDownView({ 
      … same params … 
     }); 

     // I have verified that the params are working here, regardless that they are also present in the previous nested views 
     console.warn(this.component.get('measures')); 
     console.warn(this.component); 
     console.warn('#delete-component-'+this.component.cid); 
     console.warn(this.component.cid); 

     new DeleteInstrumentView({ 
      collection: this.component.get('measures'), 
      parent: this.component, 
      el: '#delete-component-'+this.component.cid, 
      parentCID: this.component.cid 
      // The browser throws the error and points here // 
     }); 

     } 
     return this; 
    }, 

    … other functions … 

    }); 
}); 

这里是DeleteInstrumentView.js文件：

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'app/dispatch', 
    'app/log', 
    'text!backbone/templates/button/deleteInstrument.html' 
], function($, _, Backbone, dispatch, log, deleteInstrumentTemplate){ 
    var DeleteInstrumentView = Backbone.View.extend({ 
    events : { 
     'click' : 'deleteInstrument' 
    }, 

    initialize: function(options) { 
     if (options) { 
     console.warn(options); 
     this.collection = options.collection; 
     this.parent = options.parent; 
     this.el = options.el; 
     this.parentCID = options.parentCID; 
     } 
     this.render(); 
    }, 

    render: function() { 
     var compiledTemplate = _.template(deleteInstrumentTemplate); 
     $(this.el).append(compiledTemplate); 
     return this; 
    }, 

    deleteInstrument: function(instrument) { 
     console.log('DELETE clicked'); 
    } 
    }); 
    return new DeleteInstrumentView(); 
}); 

完整的错误跟踪：

Uncaught TypeError: object is not a function componentView.js:112 
Backbone.View.extend.render componentView.js:112 
Backbone.View.extend.initialize componentView.js:68 
Backbone.View backbone.js:1236 
child backbone.js:1467 
(anonymous function) componentsView.js:220 
_.each._.forEach underscore.js:78 
Backbone.View.extend.render componentsView.js:211 
Backbone.Router.extend.newSong router.js:48 
(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:146 
initialize SOF.js:17 
(anonymous function) application.js:33 
context.execCb require.js:1598 
Module.check require.js:846 
(anonymous function) require.js:1084 
(anonymous function) require.js:131 
(anonymous function) require.js:1127 
each require.js:59 
Module.emit require.js:1126 
Module.check require.js:900 
(anonymous function) require.js:1084 
(anonymous function) require.js:131 
(anonymous function) require.js:1127 
each require.js:59 
Module.emit require.js:1126 
Module.check require.js:900 
(anonymous function) require.js:1084 
(anonymous function) require.js:131 
(anonymous function) require.js:1127 
each require.js:59 
Module.emit require.js:1126 
Module.check require.js:900 
(anonymous function) require.js:1084 
(anonymous function) require.js:131 
(anonymous function) require.js:1127 
each require.js:59 
Module.emit require.js:1126 
Module.check require.js:900 
(anonymous function) require.js:1084 
(anonymous function) require.js:131 
(anonymous function) require.js:1127 
each require.js:59 
Module.emit require.js:1126 
Module.check require.js:900 
(anonymous function) require.js:1084 
(anonymous function) require.js:131 
(anonymous function) require.js:1127 
each require.js:59 
Module.emit require.js:1126 
Module.check require.js:900 
(anonymous function) require.js:1084 
(anonymous function) require.js:131 
(anonymous function) require.js:1127 
each require.js:59 
Module.emit require.js:1126 
Module.check require.js:900 
(anonymous function) require.js:1084 
(anonymous function) require.js:131 
(anonymous function) require.js:1127 
each require.js:59 
Module.emit require.js:1126 
Module.check require.js:900 
Module.enable require.js:1114 
Module.init require.js:759 
(anonymous function) require.js:966 
(anonymous function) require.js:131 
text.finishLoad text.js:155 
(anonymous function) text.js:185 
xhr.onreadystatechange text.js:287 

Answer 1

return new DeleteInstrumentView(); 

看起来你DeleteInstrumentView模块，而不是返回一个构造函数的一个实例功能。

改变变量只返回查看：

define([…], function(…){ 
    return Backbone.View.extend({ 
    … 
    }); 
    //no return here 
});