CODEWITHSUNDEEP
javascriptbackbone.js
Jaimy
Jaimy

Reputation: 517

Backbone this is undefined

I've been having trouble with backbone and asked several people for help, but no luck so far.

I create a new collection like this

let eventsCollection = new BandEvents({artist: 'Muse'});

In the collection, I do this

const BandEvents = Collection.extend({
    model: Artist,
    url: 'http://api.bandsintown.com/artists/' + this.artist + '/events.json?api_version=2.0&app_id=SomeID',

});

When I run this code, I get the following error in the browser console

Uncaught TypeError: Cannot read property 'artist' of undefined

So the this in + this.artist + is undefined. I have no idea what I'm doing wrong.

Upvotes: 0

Views: 225

Answers (2)

Jaimy
Jaimy

Reputation: 517

This is how I solved it

I changed 

let eventsCollection = new BandEvents({artist: 'Muse'});

to

let eventsCollection = new BandEvents($('#artist-input').val());

(I need to get the artist name from an input field)

And changed

const BandEvents = Collection.extend({
    model: Artist,
    url: 'http://api.bandsintown.com/artists/' + this.artist + '/events.json?api_version=2.0&app_id=SomeID',

});

to

const BandEvents = Collection.extend({
    model: Artist,
    initialize: function (artist) {
        this.url = `http://api.bandsintown.com/artists/${artist}/events.json?api_version=2.0&app_id=ShowEvents`;
    }
});

For this I use ES6's Template Literals

Upvotes: 0

bdc
bdc

Reputation: 79

this is undefined because the collection is not instantiated when you set url here. I recommend using the url function if you need to have that be dynamic: http://backbonejs.org/#Collection-url

Upvotes: 2

Related Questions