Question

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

我有一个集合＆＃39; Genres_collection（）＆＃39;从数据库中获取类型列表：

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（）被多次调用时触发（即：触发事件时）。所以，我的想法是渲染用于渲染和重新渲染＆＃39;采取行动时的观点。

因此，我有以下视图代码：

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打印到控制台或将其传递给模板时，我不会从初始化（）中获取的集合中获取数据。

这是组织此类通话的正确方法吗？
哪里出错了？如何让它从render（）中的this.genre_collection传递数据？

我正在使用requirejs并且我可以确认正在调用initialize（）和render（）调用，因为我编写了更简单的视图来执行代码。

感谢您的帮助！

Answer 1

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

console.log(that.genre_collection)

而不是

console.log(this.genre_collection);

并将plz添加到初始化函数中

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

你可以改变你的genre_collection parse nmethod，这样它就会返回你的数据

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

如何在BackboneJS中的initialize（）中获取render（）中的集合数据？

1 个答案: