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

Genres_model:

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

我有一个观点，除其他外，我想在 initialize() 上获取流派，然后在渲染中引用集合的数据。根据我的理解，仅当视图被初始化（因此名称）并且 render() 被调用任意次数时（即：当事件被触发时）才会触发初始化。所以，我的想法是 render 用于在采取操作时呈现和 're-render' 视图。

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

Search_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() 中获取的集合中获取数据。

这是组织此类电话的正确方法吗？
哪里出错了？我怎样才能让它在 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 解析方法，这样它将 return 您的数据

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

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

How to reference collection's data in render() when fetched in initialize() in BackboneJS?

javascript

jquery

backbone.js

requirejs

backbone-views