javascript - Backbone View 函数抛出 TypeError : object is not a function

Question

我有一个 Backbone View (如下)，并且我正在创建一个新的嵌套 subview ，就像渲染函数中的其他 View 一样，但我收到一个新错误 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模块正在返回一个实例而不是构造函数。

更改变量以仅返回 View :

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