Блог

Пытаясь изучить 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 функции, но я не уверен, где я создаю этот триггер и выполняется ли триггер автоматически.

Решение 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

If 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();
            });
        },
  

Не на 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.

Если вы сделаете это более явным в отношении того, как эти 2 представления связаны, я, возможно, смогу вам больше помочь. Но с учетом предоставленной информации это кажется самым простым способом.