View

Core. View

A base class for Views. Most components should extend the View class. The View class itself does not have much functionality. Instead it documents conventions for how Views should operate. Views in the Lotus app also function as Controllers.

Constructor

new View(optionsopt)

Create a new View.

Source:
Parameters:
Name Type Attributes Default Description
options Object <optional>
 {}

An options Object.

Name Type Attributes Default Description
styles String <optional>
 ``

CSS styles for this view.
template String <optional>
 ``

The HTML template String for this view.

Members

el :HTMLElement

A reference to the HTML element for this view.

Source:
Type:
  • HTMLElement

events :EventEmitter

The event emitter for this view.

Source:
Type:
  • EventEmitter

fromHTML :Utilities.html2element

Source:
Type:
  • Utilities.html2element

styles :String

The CSS styles for this component (as a String).

Source:
Type:
  • String

template :HTMLTemplateElement

A reference to the <template> tag containing the template for this view, an HTML template string, or a templating function, for use by the View#render function. This property should be overwritten by view instances. Note that the View#cloneTemplate method assumes that the value of this property is a <template> tag.

Source:
Type:
  • HTMLTemplateElement

Methods

(abstract) addEventListeners()

Attaches event listeners to the element or its children. This method is typically called near the end of the View#render method. This method should be overwritten by View instances.

Source:

cloneTemplate() → {HTMLElement}

Clones the content of the <template> element referenced by the View#template property and sets it to this.el, as well as returns the clone. This method should only be called if the value of the View#template property is a reference to an HTML <template> element.

Source:
Returns:
Type:
HTMLElement

initialize()

Complete any rendering logic that requires the view to be attached to the DOM or is asynchronous, and add event listeners. This should be called after the render() method. This initialize() method should be overridden by View instances.

Source:

loadStyles()

Loads the styles for this component as a <style> tag in the page header. Does not load the styles if the <style> tag for this component is already present on the page.

Source:

(abstract) render()

Compiles the DOM tree for this view, sets the value of this.el to the element for this view, and returns that element. Views should not insert themselves into the DOM; this is the responsibility of their parent view/controller. The render() method should always be synchronous. Use initialize() for asynchronous work. The render() method typically also calls loadStyles() and cloneTemplate(). The render() method should be overwritten by View instances.

Source: