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

Question

我试图在调用多个集合时了解码织 View 的正确方法(有些集合只需要最初获取，有些则由事件触发)。

我有一个集合“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;
});

我有一个 View ，除此之外，我想在initialize() 上获取流派，然后在渲染中引用集合的数据。根据我的理解，只有在初始化 View (因此得名)并且调用 render() 任意次数(即:触发事件时)时，才会触发初始化。因此，我的想法是，渲染用于在执行操作时渲染和“重新渲染” View 。

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

搜索 View :

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()调用，因为我编写了可以很好地执行代码的更简单的 View 。

Answer 1

在这种情况下，您应该编写this = that

console.log(that.genre_collection) 

而不是

console.log(this.genre_collection);

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

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

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

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