'use strict';
define(
[
'backbone',
'views/maps/viewfinder/PredictionView',
'models/maps/viewfinder/ViewfinderModel',
],
(Backbone, PredictionView, ViewfinderModel) => {
// The base classname to use for this View's template elements.
const BASE_CLASS = 'viewfinder-predictions';
/**
* @class PredictionsListView
* @classdesc PredictionsListView manages a list of autocomplete
* predictions that can be selected by the user.
* @classcategory Views/Maps
* @name PredictionsListView
* @extends Backbone.View
* @screenshot views/maps/viewfinder/PredictionsListView.png
* @since 2.28.0
* @constructs PredictionsListView
*/
var PredictionsListView = Backbone.View.extend(
/** @lends PredictionsListView.prototype */{
/**
* The type of View this is
* @type {string}
*/
type: 'PredictionsListView',
/**
* The HTML class to use for this view's outermost element.
* @type {string}
*/
className: BASE_CLASS,
/**
* The HTML element to use for this view's outermost element.
* @type {string}
*/
tagName: 'ul',
/**
* @typedef {Object} ViewfinderViewOptions
* @property {ViewfinderModel} The model associated with the parent view.
*/
initialize({ viewfinderModel }) {
this.children = [];
this.viewfinderModel = viewfinderModel;
this.setupListeners();
},
/** Setup all event listeners on ViewfinderModel. */
setupListeners() {
this.listenTo(this.viewfinderModel, 'change:predictions', () => {
this.render();
});
this.listenTo(this.viewfinderModel, 'selection-made', (newQuery) => {
if (this.viewfinderModel.get('query') === newQuery) return;
this.clear();
});
},
/**
* Remove all child view elements and destroy their Backbone.View.
*/
clear() {
while (this.children.length) {
this.children.pop().remove();
}
},
/**
* Render the Prediction sub-views, tracking
* them so they can be removed and their event listeners
* cleaned up.
*/
render() {
this.clear();
this.children = this.viewfinderModel.get('predictions').map((prediction, index) => {
const view = new PredictionView({
index,
predictionModel: prediction,
viewfinderModel: this.viewfinderModel,
});
view.render();
return view;
});
this.$el.html(this.children.map(view => view.el));
},
});
return PredictionsListView;
});