我正在尝试编辑我没写过的骨干应用程序。我的目标是在搜索：成功＆＃39;时，从应用视图重置构面视图的集合。触发了。
第一个文件是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视图。因此，我主要想知道如果已经渲染视图并且使用新数据触发集合重置，我将如何调用该视图。
答案 0 :(得分：0)
我猜测你的应用程序结构，但从我所看到的，你只需要为你的三个Facet Views创建一个变量（最初为空）。不要继续创建重复的视图对象是个好主意，因为它们都会注册相同的事件并导致代码错误地运行多次。
我认为这应该适用于您的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();
}
});
当您想要创建新视图时，我可能会误读，但是如果没有，那么此处的代码将确保您重用现有视图（如果这是您的目标）。