Backbone View function throws TypeError: object is not a function

Question

I have a Backbone view (below), and I am creating a new nested child view, just like the other views in the render function, but I get a new error Uncaught TypeError: object is not a function. I am unsure of why it is complaining, because it is a function with paramaters. I get the error even without passing in parameters, and it points to the call to the new DeleteInstrumentView as noted below. I am having trouble debugging this as I am also not quite sure of the error, and dont believe it to be syntax related.

Here is the full code if for some reason you are interested.

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 …

  });
});

and here is the DeleteInstrumentView.js file :

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

Full error Trace:

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

chris Frisina · Accepted Answer · 2013-07-05 21:45:50Z

2

  return new DeleteInstrumentView();

Looks like your DeleteInstrumentView module is returning an instance instead of a constructor function.

Change the variable to just return the View:

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

edited Jul 5, 2013 at 21:45

chris Frisina

19.3k24 gold badges91 silver badges173 bronze badges

answered Jul 5, 2013 at 21:38

Peter Lyons

147k32 gold badges285 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mu is too short Over a year ago

And his next problem is that _.template( deleteInstrumentTemplate) returns a function and $x.append(some_function) will execute that function with arguments that the compiled template isn't expecting.

chris Frisina Over a year ago

@muistooshort Can you explain more? I am under the understanding that when a single paramater is passed to underscores.template(), it just uses the html. That is what I am doing here, since the template does not have any dynamic content.

mu is too short Over a year ago

@chrisFrisina: _.template(x) returns a function, then you call that function to get the final HTML. When you pass a function to append, it executes that function as f(index, html) but those arguments don't match what the compiled template function expects. So it may work but it works purely by accident.

Collectives™ on Stack Overflow

Backbone View function throws TypeError: object is not a function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related