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

但无论我点击哪种类型，我都会得到一个空集。有人能告诉我我在这里做错了吗？

非常感谢！

Answer 1

默认情况下不存储选项，但您可以覆盖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];
    }           
});

Answer 2

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

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

BackboneJS基于参数获取集合

2 个答案: