如何在另一个视图中使用提取的骨干收集数据？

Question

尝试学习Backbone并尝试获取数据时遇到绊脚石，我使用SearchBarView视图很好地获取了数据，但是一旦获取了数据，我不知道如何才能在SearchResultsView中获取该数据以进行模板制作列出每个结果？

抱歉，如果这听起来有点含糊，目前正在努力使我对此有所帮助，可以通过指导来解决！

SearchBarView

performSearch: function(searchTerm) {

            // So trim any whitespace to make sure the word being used in the search is totally correct
            var search = $.trim(searchTerm);

            // Quick check if the search is empty then do nothing
            if(search.length <= 0) {
                return false;
            }

            // Make the fetch using our search term
            dataStore.videos.getVideos(searchTerm);

        },

转到VideoSearchCollection

getVideos: function(searchTerm) {

            console.log('Videos:getVideos', searchTerm);

            // Update the search term property which will then be updated when the url method is run
            // Note make sure any url changes are made BEFORE calling fetch
            this.searchTerm = searchTerm;

            this.fetch();
        },

SearchResultsView

initialize: function() {

            // listens to a change in the collection by the sync event and calls the render method
            this.listenTo(this.collection, 'sync', this.render);

            console.log('This collection should look like this: ', this.collection);
        },


        render: function() {

            var self = this,
                gridFragment = this.createItems();

                this.$el.html(gridFragment);

            return this;
        },


        createItems: function() {

            var self = this,
                gridFragment = document.createDocumentFragment();

                this.collection.each(function (video) {
                    var searchResultView = new SearchResultView({
                        'model': video
                    });

                    gridFragment.appendChild(searchResultView.el);

                }, this);


            return gridFragment;

        }

现在，我不确定如何在SearchResultView获取此数据，我想我需要从某个地方触发一个事件并在initialize函数中侦听该事件，但是我不确定该在哪里触发或是否在触发自动制作。

Answer 1

目前尚不清楚100％如何初始化SearchResultView。

但是，为了拥有对集合的引用，您不能简单地将引用传递给视图的构造函数。 像这样：

//在您的SearchbarView中

var myCollection = new Backbone.Collection(); // and you are populating the collection somewhere somehow 
var searchResultView = new SearchResultView(myCollection) // you just pass this collection as argument.
myCollection.bind("change", function(){
   searchResultView.parentCollection = myCollection;
 }

在searchResultView内部，您只需例如通过parentCollection引用此集合。

如果您通过这两个视图的连接或关联方式更加明确，则我可能会为您提供更多帮助。 但是，根据给定的信息，这似乎是最简单的方法。

Answer 2

解决方案1

如果dataStore是全局变量，则SearchBarView

dataStore - appears like a global variable
videos - a collection attached to global variable

然后在

SearchResultsView

this.listenTo(dataStore.videos, 'sync', this.render);

解决方案2

如果dataStore不是全局变量

getVideos: function(searchTerm) {

            console.log('Videos:getVideos', searchTerm);

            // Update the search term property which will then be updated when the url method is run
            // Note make sure any url changes are made BEFORE calling fetch
            this.searchTerm = searchTerm;

            var coll=this;       //this should refer to the collection itself
            this.fetch().done(function(){
                var searchResultView = new SearchResultsView({collection:coll});
                searchResultView.render();
            });
        },