Question

I’m upgrading from backbone.js 0.5.3 to 0.9.1 and I’m having issues with one particular error here is the back trace:

**Uncaught TypeError: object is not a function**
_.extend._prepareModel
_.extend.add
_.extend.reset
Backbone.Collection
child
Backbone.View.extend.render
(anonymous function)
Backbone.Events.trigger
stage.$el.stop.animate.complete
jQuery.extend.speed.opt.complete
jQuery.fx.step
t
jQuery.extend.tick

when I go to the code and study it, it seems to be coming from a collection but the final error point is:

// Prepare a model or hash of attributes to be added to this collection.
    _prepareModel: function(model, options) {
      options || (options = {});
      if (!(model instanceof Model)) {
        var attrs = model;
        options.collection = this;
        model = new this.model(attrs, options);
       /
      /
     /
   here:    Uncaught TypeError: object is not a function



        if (!model._validate(model.attributes, options)) model = false;
      } else if (!model.collection) {
        model.collection = this;
      }
      return model;
    },

Update:

As requested here are the steps:

//from inside the collection (this object is actually coming in from elsewhere but 
var viewconfig ={
            id:"values-tab-panel",
            idprefix:"values-tab",
            classname:"tabpanel",
            items:[
                {
                    urlRoot:"/"+lang+"/values",
                    url:"someurl1"

                },
                {
                    urlRoot:"/"+lang+"/values",
                    url:"/someurl2"

                },
                {
                    urlRoot:"/"+lang+"/values",
                    url:"/someurl3",
                }
            ]}
    this.view   = new TabPanelView(viewconfig); 

then inside of the view:

render: function(args){
        // 
        /*
         * what needs to happen is that the first time the render is called it creates a jquery DOM object which
         * can then be manipulated hencforth, currently there's all kinds of javscript bits which relate to it but not
         * an actual piece of DOM. closure should deal with the rest of it but theres nothing which is assigned
         * 
         */
        if(!args)
        {
            //first render
            var nav             = $("<aside/>").addClass("tab-navigation").append("<ol/>").attr("role","navigation");
            var tabcontent      = $("<section/>").addClass("tab-panels");
            for(i = 0;i<this.views.length;i++)
            {
                $("ol",nav).append("<li><a rel='"+this.views[i].id+"' href='javascript:;' class='tab-nav'></a></li>");
                tabcontent.append(this.views[i].el);
            }
            this.$el.empty().append(nav).append(tabcontent);
            //this.$el.append("<aside class='tab-navigation' ><ol role='navigation'>"+listhtm+"</ol></aside>")
            //this.$el.append("<section class='tab-panels'>"+innerhtm+"</section>");

            this.attach();
        }
        else if(args && args.update == true){
            // partial render -- i.e. update happening

            this.container = $(this.id);
            var targetid = args.what.cid;
            for(i = 0;i<this.views.length;i++)
            {
                var curcontent  = this.$el.find("div#"+this.views[i].id);
                var curlink     = this.$el.find("a[rel='"+this.views[i].id+"']")
                if(this.views[i].cid == targetid)
                {
                    curcontent.html($(this.views[i].el).html());
                    curlink.text(this.views[i].model.rawdata.header);
                }
                if(i>0)
                {
                    // set the first panel 
                    curcontent.addClass("tab-content-hide");
                }
                if(i==0)
                {
                    curcontent.addClass("tab-content-show");
                    curlink.addClass("tab-nav-selected");
                }
                //$("a[rel='"+this.views[i].id+"']").die().unbind().live("mousedown",this.switchtabs);// dont ask 
                log("a[rel='"+this.views[i].id+"']")
            }

            this.update();
        }
        return this;
    },

Answer 1

I’m still not completely sure if this is right ut it’s removed my error and making things progress well now.

It seems as though Backbone 0.9.x has made it so that you cannot set a model in your Collection’s initialize function. For me the error was that in backbone 0.5.x i could do this:

var mycollection = Backbone.Collection.extend({
    initialize: function(args)
    {
        this.model = new mycollectionmodel();
                //some stuff
        }
});
var whatever = new mycollection();

however in backbone 0.9.x i have to do this:

var mycollection = Backbone.Collection.extend({
        model: mycollectionmodel,
    initialize: function(args)
    {
        //some stuff
        }
});
var whatever = new mycollection();

or this:

var mycollection = Backbone.Collection.extend({
    initialize: function(args)
    {
        //some stuff
        }
});
var whatever = new mycollection({model:new mycollectionmodel()});

but the first throws the error above…