Class: View

.base. View

A base View class that other views inherit from

new View( [data] [, options])

Create a new View
Parameters:
Name Type Argument Default Description
data Object <optional>
{} The model or raw data to create the view from
options Object <optional>
{} An options object.
Properties
Name Type Argument Default Description
container Object | String <optional>
The container to insert the view into. May be either a DOM Node or a DOM selector string. If provided, the `.render()` method may be called without the `container` option.
el Object | String <optional>
If provided, this option sets the value of the `el` property of the View. May be either a DOM Node or a DOM selector string. This is typically either the container element that the render method will insert HTML in, or the actual element to be inserted. If this option is provided, the `template` method will not be invoked.
position String <optional>
'end' The position to render this view at within its container. Possible value are `start` (inserts the view as the first element in the container), `end` (inserts the view as the last element in the container), and `replace` (clears all child nodes from the container before inserting this view). If provided, the `.render()` method may be called without the `position` option provided.
template Boolean <optional>
A templating function that accepts the view's model as an input, and returns either an HTML string or DOM Node. This method may also simply be provided as a method on the view subclass.
Properties:
Name Type Description
el Object The DOM element attached to this view (this Node exists whether or not it has been inserted into the DOM). This may be either the container element where you'll insert HTML, or the actual element to insert into the DOM. Will be an empty div if no element was provided during intialization.
model Object The data for this view
position String The position within the container element to insert this view
template function The templating function for this view. May return either an HTML string or a single DOM Node.

Extends

Methods


clear()

Clears the container element of any HTML and removes all listeners from this View, without removing the container element from the DOM
Returns:
Returns the view object
Type
Object

emit(event [, args])

Triggers the callbacks for a given event. Subsequent arguments will be passed to the event callbacks.
Parameters:
Name Type Argument Description
event String The event name to trigger
args Any <optional>
<repeatable>
Additional arguments to pass to the event callback
Inherited From:
Returns:
Returns a Promise that resolves when all callbacks are complete
Type
Object

off( [event] [, callback])

Unsubscribe from one or more events on this object
Parameters:
Name Type Argument Description
event String <optional>
The event to remove. If none is specified, all events will be removed.
callback function <optional>
The callback to remove. If none is specified, all callbacks for the specified event will be removed.
Inherited From:
Returns:
Returns the Emitter object
Type
Object

on(event, callback)

Subscribe to an event on this object, by binding a callback function to the name of the event. Callbacks may be Promises or regular functions.
Parameters:
Name Type Description
event String | Object The name of the event to subscribe to. May also be an object mapping event names to callback functions
callback function The callback function to invoke whenever the specified event is fired
Inherited From:
Returns:
Returns the emitter object
Type
Object

once(event, callback)

Subscribe to an event on this object for one time only. After the event is triggered, the callback will be removed. Callbacks may be Promises or regular functions.
Parameters:
Name Type Description
event String The name of the event to subscribe to
callback function The callback function to invoke when the event is fired
Inherited From:
Returns:
Returns the emitter object
Type
Object

remove()

Removes all listeners from this View, and removes its container element from the DOM
Returns:
Returns the view object
Type
Object

render( [options])

Inserts this view into the DOM, within the specified container. You will often want to overwrite this function on the subclass.
Parameters:
Name Type Argument Default Description
options Object <optional>
{} An options object
Properties
Name Type Argument Default Description
container Object | String <optional>
A container element to render the view in. May be either a DOM selector string or a DOM Node. If this option was already provided in the view's `container` option, this argument may be omitted.
position String <optional>
'end' The position to render this view at within its container. Possible value are `start` (inserts the view as the first element in the container), `end` (inserts the view as the last element in the container), and `replace` (clears all child nodes from the container before inserting this view). If this option was already provided in the view's `position` option, this argument may be omitted.
Returns:
Returns this view object
Type
Object

template()

A no-op template function, to be replaced by a template function on the view subclass. The template function should accept the model data as the first argument, and return either an HTML string or a DOM Node. This may also be provided in the `template` option.