Backbone.js Uncaught TypeError: Object [object Array] has no method 'on'

Question

Can anyone help me with this one? I don't know what's going wrong.

Getting data from a json file:

this.categoryTrees = new CategoryTrees();
this.categoryTrees.getCategoryTreesFromJSON();

this.categories = new Categories();
this.categories.getCategoriesFromJSON();

Creating views for it:

//view for startscreen
this.startscreenView = new StartscreenView({collection: this.categoryTrees});

//view for subjectsList
this.subjectsListView = new SubjectsListView({collection: this.categories.where({ category_tree : "onderwerpen" }) });

The second one with the where clause gives me an error: Uncaught TypeError: Object [object Array] has no method 'on'

When I don't put up the where clause it works just fine. In console I am able to perform the where function without any problems.

Do I miss something here?

You need to post the classes for your two collections. Are they definitely Backbone Collections? — net.uk.sweet
– net.uk.sweet, Commented Nov 7, 2013 at 15:49

BenMorel · Accepted Answer · 2013-11-07 16:42:01Z

2

The where method will return an array of all the models in a collection that match the passed attributes. So it doesn't return a Backbone.Collection so you get the on undefined error.

You need to create a new Categories collection from the result of the where with :

this.subjectsListView = new SubjectsListView({
    collection: new Categories(
        this.categories.where({ category_tree : "onderwerpen" })) 
});

edited Nov 7, 2013 at 16:42

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Nov 7, 2013 at 16:20

nemesv

140k16 gold badges424 silver badges364 bronze badges

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

9 Comments

MarV Over a year ago

Thank you for your quick response! But I need to perform the this.categories.getCategoriesFromJSON(); function before the where clause, as this function will return my categories. Creating a new collection without performing the function won't give me any results as the collection is not valid.

nemesv Over a year ago

You can still call the this.categories.getCategoriesFromJSON(); before the where. The point is that from the result what the where returns you need to create a new Categories collection which will contains exactly the items which where returned from the where. Have you actually tried my solution? Is it worked or you have got a different error?

MarV Over a year ago

Thank you. But I'm not getting that. When I do so my view is empty, and the collection shows an unfiltered array in console. I tried all combinations, but no result. this.categories = new Categories(); this.categories.getCategoriesFromJSON(); this.subjectsListView = new SubjectsListView({ collection: new Categories( this.categories.where({ parent : null })) });

nemesv Over a year ago

@MarV then please post your getCategoriesFromJSON method because creating a new collection should work fine. See also in this example: jsfiddle.net/WD8vD It would be also helpfull I could create a jsfiddle with your own code.

MarV Over a year ago

You're right. The function works fine. I've tested it with your getCategoriesFromJSON method, and then things are working fine. The where on my collection causes the problems. This is my method:

|

MarV · Accepted Answer · 2013-11-09 12:54:54Z

Found a proper solution. Before starting the backbone app I'm retrieving the JSON data in a new function loadDataAndStartApp(). This function is loaded when the dom is ready, and once the JSON is loaded it starts the backbone app. This way you are certain to have all the data available. Together with what nemesv said about creating a new categories function and al the other suggestions at his answer I worked out the following answer to this problem.

var AppRouter = Backbone.Router.extend({
routes: {
    "": "startscreen",
    "Onderwerpen": "subjectsList"
},

initialize: function  (options) {


    this.categories = new Categories( options.categories );


    this.subjectsListView2 = new SubjectsListView({
        collection: new Categories(
            this.categories.where({ parent : null, name : "Evenwicht" })
        )
    });

    //view for spacesList



},

startscreen: function () {
    $('#app').html(this.startscreenView.render().el);
},

subjectsList: function () {
    $('#app').append(this.subjectsListView2.render().el);
},

});

function loadDataAndStartApp(){

var categories     = []

// LOAD APP DATA
$.ajax({

    url      : './catalogue.json',
    dataType : 'json'

}).done(function(data){

    console.log('Catalogue retrieved');

    // GET CATEGORIES
    _.each(data.categories, function( categorieObj ){

        var categorieName       = _.keys(categorieObj)[0],
            categorieAttributes = categorieObj[categorieName];

        categories.push( categorieAttributes );

    });

    // START APP
    var app = new AppRouter({ 
        categories     : categories
    });

    Backbone.history.start();
});
}


$(function(){
// ON DOM READY

loadDataAndStartApp();
});

Collectives™ on Stack Overflow

Backbone.js Uncaught TypeError: Object [object Array] has no method 'on'

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related