BackboneJS fetch collection based on parameters

Question

I want to display multiple musical artists based on the genre in a view. So, first of all I have my menu tabs:

<a data-name="hiphop" class="genre">HipHop</a>
<a data-name="rock" class="genre">Rock</a>
<a data-name="alternative" class="genre">Alternative</a>
<a data-name="jazz" class="genre">Jazz</a>

then my genre.js contains:

Genres.Collection = Backbone.Collection.extend({
    url: function() {
        return 'path to my json';
    },
    parse: function(response, genre){
        return response.data.genres[genre];
       // when I do: return response.data.genres.rock;
       // I get all artists from the genre "rock".
       // but I want the response to be based on the variable "genre"
    }           
});

then, in my mainView.js:

events: {
    'click .genre' : 'genre'
},

genre: function(event, genre){
    event.preventDefault();
    // get the clicked genre
    var genreName = $(event.target).data('name');
    var genresCollection = new Genres.Collection({genre:genreName });
    genresCollection.fetch();
    this.insertView('.genres', new Genres.View({collection: genresCollection}));                    
},

but no matter which genre I click, I get an empty Collection. can someone tlel me what I'm doing wrong here?

Many thanks!

Answer 1

Options are not stored by default, but you can override your initialize method to provide this functionality. You would then use this stored value in your parse method :

Genres.Collection = Backbone.Collection.extend({
    url: function() {
        return 'path to my json';
    },
    initialize: function(opts) {
       opts = opts || {};
       this.genre = opts.genre || 'rock';
    },
    parse: function(response){
        return response.data.genres[this.genre];
    }           
});