backbone.js 从app.js更新视图

5sxhfpxr  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(168)

我正在尝试编辑一个不是我编写的 Backbone.js 应用程序。我的目标是在触发“search:success”时从应用程序视图重置面视图的集合。
第一个文件是app.js文件:

var vent = require('./vent');
var maxListSize = $('.bnr-search-selected-container').data('resultsnumber');
var SearchResults = require('./collections/results');
var Facets = require('./collections/facets');
var Keymatch = require('./models/keymatch');
var Partmatch = require('./models/partmatch');
var Facet = require('./models/facet');
var FacetView = require('./views/facets');
var KeymatchView = require('./views/keymatch');
var PartmatchView = require('./views/partmatch');
var ListView = require('./views/list');
var SearchView = require('./views/search');
var SelectedFacetsView = require('./views/selectedFacets');
var HeaderView = require('./views/header');
var PaginationView = require('./views/pagination');
var EmptyView = require('./views/empty');
var TotalView = require('./views/pageResults');
var fileTypes,
    fileTypesView,
    keymatch,
    partmatch,
    listView,
    languageTypes,
    languageView,
    pagination;
/*
 *   event : event-type (arguments passed) - listeners
 *
 *   Events:
 *       filter:clear() - list, facets, selected filters
 *       filter:select(type) - list, facets, selected filters
 *       filter:deselect(type) - list, facets, selected filters
 *       search:error(query) - list, search box, keymatch, facets
 *       search:success(facets) - list, search box, keymatch, facets
 *       search:empty(query) - list, search box, keymatch, facets
 *       search:keymatch(keymatch) - keymatch

**/

function getUrlVars() {
    var vars = {}, hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars[hash[0]] = hash[1];
    }
    return vars;
}

module.exports = function() {
    $(function() {
        var params = getUrlVars();
        var query = params ? params.q : undefined;
        var searchResults = new SearchResults();
        var searchBox = new SearchView({
            el: $('.bnr-search-form-container'),
            value: query ? decodeURIComponent(query) : '',
            collection: searchResults
        });
        var screenMode = 'md';

        var empty = new EmptyView({
            el: $('.bnr-search-empty-container')
        });

        if (query) {
            searchResults.search({query: decodeURIComponent(query)},false,false);
        }

        var header = new HeaderView({
            query: query ? decodeURIComponent(query.replace(/\+/g, '%20')) : '',
            el: $('#bnr-search-heading-container'),
            collection: searchResults
        });

        var totals = new TotalView({
            el: $('.bnr-search-totals')
        });

        pagination = new PaginationView({
            el: $('#bnr-search-pagination')
        });

        selectedFilters = new SelectedFacetsView({
            el: $('.bnr-search-selected-container')
        });

        function positionControls () {
            var $app = $('#bnr-search-wrapper');
            screenMode = screenMode || 'md';
            var windowIsSmall = (window.breakpoints.xs || window.breakpoints.sm || window.breakpoints.md),
                $mdContainer = $app.find('.bnr-fdd-cntrl-container-md .bnr-faceted-drilldown'),
                $xsContainer = $app.find('.bnr-fdd-cntrl-container-xs'),
                $controls = $app.find('.js-fdd-cntrls');
            if (screenMode === 'md' && windowIsSmall) {
                $controls.detach().appendTo($xsContainer);
                screenMode = 'xs';
            } else if (screenMode === 'xs' && !windowIsSmall) {
                $controls.detach().appendTo($mdContainer);
                screenMode = 'md';
            }
        }

        function updateQuery(query){
            var location = new String(window.location).split('?q=');
            var newPath = location[0] + '?q=' + query;
            window.history.pushState({}, "", newPath);
         }

         window.onpopstate = function(e) {
             if (e.state) {
                 var location = new String(window.location).split('?q=');
                 var query = location[1];
                searchResults.search({query: query});
             }
         }

        // Event Handling
        vent.on('search:updateQuery', function(newQuery) {
            if (query !== newQuery) {
                query = newQuery;
                updateQuery(newQuery);
            }
        });

        vent.on('search:success', function(data) {
            /*var types = [
                {
                    id: 'product-series',
                    name: productTypes.product
                },
                {
                    id: 'product-detail',
                    name: productTypes.partmodel
                },
                {
                    id: 'solution',
                    name: productTypes.application
                }
            ];*/
            var test = $('.bnr-facet-file-type-block').data('rendered');
            if (data.facetsDocType.length > 0 && !$('.bnr-facet-file-type-block').data('rendered')) {
                $('.bnr-facet-file-type-block').data('rendered','true');
                $('.bnr-facet-file-type-block, .bnr-facet-file-type-line').show();
                fileTypes = new Facets(data.facetsDocType);
                fileTypesView = new FacetView({
                    collection: fileTypes,
                    el: $('#bn-search-facets-file-type'),
                    facets: window.Banner.Search ? window.Banner.Search.facetsAndItems : undefined,
                    initialized: positionControls
                });
            } else if (data.facetsDocType.length <= 0) {
                $('.bnr-facet-file-type-block, .bnr-facet-file-type-line').hide();
            }

            if (data.facetsLanguage.length > 0 && !$('.bnr-facet-language-block').data('rendered')) {
                $('.bnr-facet-language-block, .bnr-facet-language-line').show();
                $('.bnr-facet-language-block').data('rendered','true');
                languageTypes = new Facets(data.facetsLanguage);
                languageView = new FacetView({
                    collection: languageTypes,
                    el: $('#bnr-search-facets-language'),
                    facets: window.Banner.Search ? window.Banner.Search.facetsAndItems : undefined,
                    initialized: positionControls
                });
            } else if (data.facetsLanguage.length <= 0) {
                $('.bnr-facet-language-block, .bnr-facet-language-line').hide();
            }

            if(!$('.bnr-facet-product-block').data('rendered')) {
                $('.bnr-facet-product-block').data('rendered','true');
                var products = new Facets(data.facetsPageType);
                productsTypeView = new FacetView({
                    collection: products,
                    el: $('#bnr-search-facets-product'),
                    initialized: positionControls
                });
            }

            //productsTypeView.clearFilter();
            //if (fileTypesView) {
            //    fileTypesView.clearFilter();
            //}

            selectedFilters.clearAll();

            if (!$('.bnr-search-results-container').data('rendered')) {
                $('.bnr-search-results-container').data('rendered','true');
                listView = new ListView({
                    el: $('.bnr-search-results-container'),
                    collection: searchResults,
                    size: maxListSize
                });
            }

            window.Banner.Utils.scrollTo($('#bnr-search-wrapper').top, 10);
        });

        vent.on('search:keymatch', function(key) {
            var keymatchModel = new Keymatch(key.match);
            if (keymatch) {
                keymatch.update(keymatchModel);
            } else {
                keymatch = new KeymatchView({
                    model: keymatchModel,
                    el: $('.bnr-search-keymatch-container')
                });
            }

        });

        vent.on('search:nokeymatch', function() {
            if (keymatch) {
                keymatch.hide();
            }
        });

        vent.on('search:partmatch', function(key) {
            var partmatchModel = new Partmatch(key.match);
            if (partmatch) {
                partmatch.update(partmatchModel);
            } else {
                partmatch = new PartmatchView({
                    model: partmatchModel,
                    el: $('.bnr-search-partmatch-container')
                });
            }

        });

        vent.on('search:nopartmatch', function() {
            if (partmatch) {
                partmatch.hide();
            }
        });

        vent.on('filter:length', function(data) {
            pagination.render();
            pagination.reset(data.currentPage ? data.currentPage : 1, data.pagesNeeded);
            totals.update({
                total: data.length,
                number: '1-3',
                listSize: data.listSize,
                length: data.length,
                page: data.currentPage ? data.currentPage : 1,
                pagesNeeded: data.pagesNeeded
            });
        });

        $(document).on('banner:resize', positionControls);
    });
}

下面是facets.js文件:

var templ = $('#bnr-search-tmpl-facet') ? $('#bnr-search-tmpl-facet').html() : '';
var vent = require('./../vent');
var arr = [];
var getName = function(id, authored) {
    var name;
    for (var i = 0; i < authored.length; i++) {
        var authoredItem = authored[i];

        if (id === authoredItem.value) {
            name = authoredItem.name;
        }
    }

    return name || id;
};

module.exports = Backbone.View.extend({
    template: Handlebars.compile(templ),
    initialize: function(options) {
        this.vent = vent;
        if (options && options.facets) {
            this.authoredFacets = options.facets;
        }
        var self = this;
        $('.facet-btn-reset').on('click', function(e) {
            e.preventDefault();
            self.clearFilter();
        });
        var deselect = function(id) {
            self.$el.find('.checkbox-custom[data-value=' + id + ']').attr('checked', false);
            self.vent.trigger('filter:selected', { selected: self._selectedFilters(id, false) });
            if (arr.length) {
                $('.facet-btn').css({'display': 'inline-block'});
            } else {
                $('.facet-btn').css({'display': 'none'});
            }
        };
        this.vent.on('filter:deselect', deselect, this);
        this.vent.on('filter:clear', this.clearFilter, this);
        $('.facet-list-item-block .js-expand').off();
        $('.facet-list-item-block .js-expand').on('click', this.expand);
        this.listenTo(this.collection, 'sync', this.render);
        this.render();
        if (typeof options.initialized === 'function') {
            options.initialized.call(this);
        }
    },
    render: function() {
        var facets = [];
        for (var i = 0; i < this.collection.models.length; i++) {
            var facet = this.collection.models[i];
            facets.push({
                id: facet.getId(),
                name: this.authoredFacets ? getName(facet.getId(), this.authoredFacets) : facet.getName(),
                type: facet.getType(),
                count: facet.getCount()
            });
        }

        if (arr.length) {
            $('.facet-btn').css({'display': 'inline-block'});
        } else {
            $('.facet-btn').css({'display': 'none'});
        }

        this.$el.html(this.template({facet: facets}));

        return this;
    },
    events: {
        'change input[type="checkbox"]': 'filter'
    },
    expand: function (ev) {
        ev.preventDefault();
        var $this = $(ev.target),
            $block = $this.closest('.facet-list-item-block');

        if ($block.hasClass('active')) {
            $block.removeClass('active');
        } else {
            $block.addClass('active');
        }
    },
    //builds selected facet array. arr hold selected facets
    _selectedFilters: function(value, checked, facetType) {
        if (checked && arr.map(function(e) {return e.value;}).indexOf(value) < 0) {
            arr.push({value: value,facetType: facetType});
            trackEvent('Site Search Facet',value,'Filter');
        } else if (!checked) {
            var index = arr.map(function(e) {return e.value;}).indexOf(value);
            if (index >= 0) {
                arr.splice(arr.map(function(e) {return e.value;}).indexOf(value), 1);
            }
        }

        return arr;
    },
    filter: function(item) {
        var $selected = $(item.currentTarget),
            selectedID = $selected.data('value'),
            checked = $selected.prop('checked'),
            facetType = $selected.data('facet-type');
        this.vent.trigger('filter:selected', { selected: this._selectedFilters(selectedID, checked, facetType)});

        if (arr.length) {
            $('.facet-btn').css({'display': 'inline-block'});
        } else {
            $('.facet-btn').css({'display': 'none'});
        }
    },
    clearFilter: function() {
        arr.length = 0;
        arr = [];
        var checkboxes = $('.bnr-fdd-ne-cntrl').find('input[type=checkbox]');
        checkboxes.each(function(index, box) {
            $(box).attr('checked', false);
        });
        //this.vent.trigger('filter:selected', { selected: [] });
        if (arr.length) {
            $('.facet-btn').css({'display': 'inline-block'});
        } else {
            $('.facet-btn').css({'display': 'none'});
        }
    },
    deselect: function(option) {
        arr.splice(arr.map(function(e) {return e.value;}).indexOf(option), 1);
        //this.render();
        this.vent.trigger('filter:selected', { selected: arr });
    }
});

实际上,在app.js文件中,对于下面的部分:

if (data.facetsDocType.length > 0 && !$('.bnr-facet-file-type-block').data('rendered')) {
            $('.bnr-facet-file-type-block').data('rendered','true');
            $('.bnr-facet-file-type-block, .bnr-facet-file-type-line').show();
            fileTypes = new Facets(data.facetsDocType);
            fileTypesView = new FacetView({
                collection: fileTypes,
                el: $('#bn-search-facets-file-type'),
                facets: window.Banner.Search ? window.Banner.Search.facetsAndItems : undefined,
                initialized: positionControls
            });
        } else if (data.facetsDocType.length <= 0) {
            $('.bnr-facet-file-type-block, .bnr-facet-file-type-line').hide();
        }

如果fileTypesView已经被渲染了,我希望能够更新它的当前集合。我一直在努力解决这个问题,因为有3个不同的facet视图都使用facets.js视图。所以我主要想知道,如果视图已经被渲染了,我如何调用它,并用新数据触发集合重置。

jaxagkaj

jaxagkaj1#

我猜你的应用程序结构,但从我所看到的,你只需要为你的三个Facet视图创建一个变量(一开始是空的)。最好不要一直创建重复的视图对象,因为它们都注册了相同的事件,导致代码错误地运行多次。
我认为这应该在你的app.js中工作:

var fileFacetView = false;

// ...

vent.on('search:success', function(data) {
    // ...
    if (data.facetsDocType.length > 0 && !$('.bnr-facet-file-type-block').data('rendered')) {
        $('.bnr-facet-file-type-block').data('rendered','true');
        $('.bnr-facet-file-type-block, .bnr-facet-file-type-line').show();
        if (fileFacetView) {
            fileFacetView.collection.reset(data.facetsDocType);
            fileFacetView.render(); // this may be triggered automatically...
        } else {
            fileFacetView = new FacetView({
                collection: new Facets(data.facetsDocType),
                el: $('#bn-search-facets-file-type'),
                facets: window.Banner.Search ? window.Banner.Search.facetsAndItems : undefined,
                initialized: positionControls
            });
        }

        fileTypes = new Facets(data.facetsDocType);
        fileTypesView = new FacetView({
            collection: fileTypes,
            el: $('#bn-search-facets-file-type'),
            facets: window.Banner.Search ? window.Banner.Search.facetsAndItems : undefined,
            initialized: positionControls
        });
    } else if (data.facetsDocType.length <= 0) {
        $('.bnr-facet-file-type-block, .bnr-facet-file-type-line').hide();
    }
});

我可能误解了什么时候你想创建一个新的视图,什么时候不想,但是这里的代码可以确保你重用现有的视图,如果这是你的目标的话。

相关问题