BackboneJS 根据参数获取 collection

Question

我想在一个视图中根据流派显示多个音乐艺术家。所以，首先我有我的菜单选项卡：

<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>

然后我的 genre.js 包含：

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

然后，在我的 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}));                    
},

但无论我点击哪种类型，我得到的都是空 Collection。有人可以告诉我我做错了什么吗？

非常感谢！

Answer 1

您需要定义成功回调。尝试：

var genresCollection = new Genres.Collection(); 
genresCollection.fetch({
    data: {
        genre: genreName 
    },
    success: (function (coll_genres) {
        console.log(coll_genres.toJSON());
    }),
    error: (function (e) {
        console.log(e);
    })
});

Answer 2

默认情况下不存储选项，但您可以覆盖 initialize 方法以提供此功能。然后，您将在 parse 方法中使用此存储值：

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

BackboneJS 根据参数获取 collection

BackboneJS fetch collection based on parameters

backbone.js

backbone-views

backbone-events

backbone.js-collections