JSDoc: Class: SetView

new SetView(model, controller, document)

A constructor function to create new set view objects.

var setView = new maria.SetView();

maria.SetView inherits from maria.ElementView and the documentation of maria.ElementView will tell you most of what you need to know when working with a maria.SetView.

A maria.SetView is intended to be a view for a maria.SetModel. The set view will take care child views when elements are added or deleted from the set model.

When an element is added to the set, the set view need to know what kind of view to make. Your application will redefine or likely override the set view's createChildView method.

maria.SetView.prototype.createChildView = function(model) {
    return new maria.ElementView(model);
};

A particularly useful pattern is using maria.SetView as the "superclass" of your application's set views. The following example shows how this can be done at a low level for a to-do application. See maria.SetView.subclass for a more compact way to accomplish the same.

checkit.TodosListView = function() {
    maria.SetView.apply(this, arguments);
};
checkit.TodosListView.superConstructor = maria.SetView;
checkit.TodosListView.prototype = maria.create(maria.SetView.prototype);
checkit.TodosListView.prototype.constructor = checkit.TodosListView;
checkit.TodosListView.prototype.getTemplate = function() {
    return checkit.TodosListTemplate;
};
checkit.TodosListView.prototype.createChildView = function(todoModel) {
    return new checkit.TodoView(todoModel);
};

Parameters:

Name	Type	Argument
`model`	maria.Model	<optional>
`controller`	maria.Controller	<optional>
`document`	Document	<optional>

Source:

maria.js, line 3032

Extends

maria.ElementView

Members

<static> superConstructor

Properties:

Name	Type	Description
`maria.SetView.superConstructor`

Source:

maria.js, line 3041

Methods

<static> subclass()

The same as maria.ElementView.

You will likely want to specify a createChildView method.

The following example creates a checkit.TodosListView constructor function equivalent to the more verbose example shown in the documentation for maria.SetView.

maria.SetView.subclass(checkit, 'TodosListView', {
    properties: {
        createChildView: function(todoModel) {
            return new checkit.TodoView(todoModel);
        }
    }
});

Source:

maria.js, line 3628

build() → {Element}

Builds the root DOM element for the view from the view's template returned by getTemplate, attaches event handlers to the root and its descendents as specified by the UI actions map returned by getUIActions, calls the buildData method to allow model values to be inserted into the root DOM element and its descendents, and calls buildChildViews. This construction of the root DOM element is lazy and only done when this method is called.

Inherited From:

maria.ElementView#build

Source:

maria.js, line 2810

Returns:

The root DOM Element of the view.

Type: Element

buildChildViews()

The model of the view is a maria.SetModel. A new view will be created for each model in that set model and the view will be appended as a child view of this set view.

Source:

maria.js, line 3055

buildData()

Does nothing by default. To be overridden by subclasses.

The intended use of this method is to populate the built root DOM element and its descendents with model data.

Inherited From:

maria.ElementView#buildData

Source:

maria.js, line 2874

buildTemplate()

Parses the HTML template string returned by getTemplate to create a DocumentFragment. The first child of that DocumentFragment is set as the root element of this view. All other sibling elements of the DocumentFragment are discarded.

Inherited From:

maria.ElementView#buildTemplate

Source:

maria.js, line 2828

buildUIActions()

Attaches event handlers to the root and its descendents as specified by the UI actions map returned by getUIActions.

Inherited From:

maria.ElementView#buildUIActions

Source:

maria.js, line 2848

createChildView(model)

Creates a child view for a model. To be overridden by subclasses.

Parameters:

Name	Type	Description
`model`	maria.Model	The model for the child view.

Source:

maria.js, line 3069

find(selector) → {Element}

Find the first element in this view that matches the CSS selector. The view's root element can be the result.

By default Maria uses the Grail library as its DOM query engine. This is to support older browsers that do not have querySelector. The Grail engine only a limited set of simple selectors.

.class
tag
tag.class
#id

If your application only needs to work in newer browsers then you can create a Maria plugin to use querySelector. Consider if you want the root element to be returned if it matches selector.

If your application needs to work in older browsers but you need more complex CSS selector strings then you can create a Maria plugin to use some libray other than Grail.

Parameters:

Name	Type	Description
`selector`	string	A CSS selector.

Inherited From:

maria.ElementView#find

Source:

maria.js, line 2962

Returns:

The first DOM element matching selector.

Type: Element

findAll(selector) → {Array}

Find all the elements in this view that matches the CSS selector. The view's root element can be in the result set.

See find for more details.

Parameters:

Name	Type	Description
`selector`	string	A CSS selector.

Inherited From:

maria.ElementView#findAll

Source:

maria.js, line 2978

Returns:

An array of the DOM elements matching selector.

Type: Array

getContainerEl() → {Element}

See buildChildViews for more details.

Inherited From:

maria.ElementView#getContainerEl

Source:

maria.js, line 2899

Returns:

The DOM Element to which child view's should be attached.

Type: Element

getController() → {maria.Controller}

If this view has not yet had its controller set then this method creates a controller and sets it as this view's controller.

Inherited From:

maria.ElementView#getController

Source:

maria.js, line 2487

Returns:

The controller object.

Type: maria.Controller

getDefaultController() → {maria.Controller}

Creates a new default controller for this view.

Inherited From:

maria.ElementView#getDefaultController

Source:

maria.js, line 2473

Returns:

The controller object.

Type: maria.Controller

getDefaultControllerConstructor() → {function}

Returns a controller constructor function to be used to create a controller for this view.

Inherited From:

maria.ElementView#getDefaultControllerConstructor

Source:

maria.js, line 2462

Returns:

The controller constructor function.

Type: function

getDocument() → {Document}

Returns the web page document for the view. This document is the one used to create elements to be added to the page, for example.

Inherited From:

maria.ElementView#getDocument

Source:

maria.js, line 2754

Returns:

The document object.

Type: Document

getModel() → {maria.Model}

Returns the current model object of this view.

Inherited From:

maria.ElementView#getModel

Source:

maria.js, line 2439

Returns:

The model object.

Type: maria.Model

getModelActions() → {Object}

When the model is set for this view, the view will automatically observe the events which are keys of the returned object. The values for each key is the view's handler method to be called when the corresponding event is dispatched on the model.

By default, a view will observe the model for change events and handle those events with the view's update method.

You can override this method but, beware, doing so can lead to the dark side.

Inherited From:

maria.ElementView#getModelActions

Source:

maria.js, line 2521

Returns:

The map of model events and view handers.

Type: Object

getTemplate() → {string}

Returns the template for this view used during the build process.

Inherited From:

maria.ElementView#getTemplate

Source:

maria.js, line 2780

Returns:

The template HTML string.

Type: string

getUIActions() → {Object}

The UI actions object maps a UI action like a click on a button with a handler method name. By default, the handler will be called on the controller of the view.

Inherited From:

maria.ElementView#getUIActions

Source:

maria.js, line 2793

Returns:

The UI actions map.

Type: Object

handleAdd(event)

When a change event is fired on this view's set model because some models were added to the set model, this method will create child views and append them as children of this set view.

Parameters:

Name	Type	Description
`event`	Object	The event object.

Source:

maria.js, line 3104

handleDelete(event)

When a change event is fired on this view's set model because some models were deleted from the set model, this method will find, remove, and destroy the corresponding child views of this set view.

Parameters:

Name	Type	Description
`event`	Object	The event object.

Source:

maria.js, line 3121

insertBefore(newChild, oldChild)

Add a new child view before an existing child view. If the oldChild parameter is not supplied then the newChild is appened as the last child.

Parameters:

Name	Type	Description
`newChild`	maria.ElementView	The child to be inserted.
`oldChild`	maria.ElementView	The child to insert before.

Inherited From:

maria.ElementView#insertBefore

Source:

maria.js, line 2913

removeChild(oldChild)

Remove an existing child view.

Parameters:

Name	Type	Description
`oldChild`	maria.ElementView	The child to be removed.

Inherited From:

maria.ElementView#removeChild

Source:

maria.js, line 2927

setController(The)

Set the current controller for this view.

Parameters:

Name	Type	Description
`The`	maria.Controller	controller object.

Inherited From:

maria.ElementView#setController

Source:

maria.js, line 2501

setDocument()

Set the web page document for the view. This document is the one used to create elements to be added to the page, for example.

Inherited From:

maria.ElementView#setDocument

Source:

maria.js, line 2765

setModel(model)

Set the current model object of this view.

Parameters:

Name	Type	Description
`model`	maria.Model	The model object.

Inherited From:

maria.ElementView#setModel

Source:

maria.js, line 2450

update(event)

The handler for change events on this view's set model object.

Parameters:

Name	Type	Description
`event`	Object	The event object.

Source:

maria.js, line 3082