在 BackboneJS 中的 initialize() 中获取时如何在 render() 中引用集合的数据？

Question

当视图调用多个集合（一些只需要最初获取，一些由事件触发）时，我试图了解组织视图的正确方法。

我有一个集合“Genres_collection()”，它从数据库中获取流派列表：

Genres_collection：

define([
    'jquery',
    'underscore',
    'backbone',
    'models/genre_model'
],function($,_,Backbone,Genre_model){
    var Genres_collection = Backbone.Collection.extend({
        model: Genre_model,
        url: '/api/genres',
        parse: function(response){
          return response;
        }
    })
    return Genres_collection;
});

流派模型：

define([
    'jquery',
    'underscore',
    'backbone'
],function($,_,Backbone){
    var Genre_model = Backbone.Model.extend({
        defaults: {
            'title': 'Untitled Track'
        }
    })
    return Genre_model;
});

我有一个视图，除其他外，我想在 initialize() 上获取流派，然后在渲染中引用集合的数据。据我了解，initialize 仅在视图被初始化（因此得名）并且 render() 被调用任意次数（即：触发事件时）时才会触发。所以，我的想法是，当采取行动时，渲染用于渲染和“重新渲染”视图。

因此，我有以下查看代码：

搜索视图：

define([
    'jquery',
    'underscore',
    'backbone',
    'collections/tracks',
    'collections/genres',
    'text!templates/search_view_title.html',
    'text!templates/search_view.html'
],function($,_,Backbone,Tracks_collection,Genres_collection,Search_view_title_template,Search_view_template){
    var Search_view = Backbone.View.extend({
        el: $('#app'),
        
        initialize: function(){
            this.collection = new Tracks_collection();
            this.genre_collection = new Genres_collection();
            this.genre_collection.fetch();
        },
        search: function(searchtype){
            switch(searchtype){
                case 'genre':
                    console.log('genre changed');
                    this.collection.fetch({
                        data: {limit: 30, type:'genre',genre_id:$('#genre_select').val()}
                    });
                break;
                case 'search':
                    console.log('search changed');
                    this.collection.fetch({
                        data: {limit: 30, type:'search',keyword:$('#keyword').val()}
                    });
                break;
            }
        },
        render: function(){
            // MAKE 'THIS' ACCESSIBLE
            var that = this;

            
            console.log(this.genre_collection);

            var template = _.template(Search_view_template);
            var template_vars = {genres: this.genre_collection};
            console.log(template_vars);
            var template_html = template(template_vars);
            that.$el.find('#container').html(template_html);
            


            this.collection.bind('add',function(collection){
                console.log('collection has been changed');
            })
                      
        }
    });

    return Search_view;

});

但是，当我尝试将 render() 中的genre_collection 打印到控制台或将其传递给模板时，我没有从在 initialize() 中获取的集合中获取数据。

1. 这是组织此类呼叫的正确方法吗？
2. 哪里出了问题？如何让它在 render() 中传递 this.genre_collection 中的数据？

我正在使用 requirejs，我可以确认正在调用 initialize() 和 render() 调用，因为我编写了更简单的视图，可以很好地执行代码。

Answer 1

在这种情况下，你应该写你的this = that

console.log(that.genre_collection) 

而不是

console.log(this.genre_collection);

将此添加到您的初始化函数中

this.listenTo(this.genre_collection , 'change', this.render);

您可以更改您的genre_collection 解析nmethod，以便它返回您的数据

parse: function(response){
    return response.genres
}