views.Base


Extends bindable.Object
Inherited By views.List, views.Stack
See also Application, Templates

Mojo views control exactly what the user sees & does. This is where all your view-specific logic should go.

View controllers are plugin-based - they don't come with any special features out of the box, such as a template engine. This allows you to fully customize exactly how view controllers behave. See the plugins section to understand how to extend view functionality.

Installation

npm install mojo-views --save-exact

Base(properties[, application])

The view constructor.

  • properties - values to set onto the view. This could be anything.
  • application - (optional) the application. Application.main will be set if this is omitted.

section

The virtual document fragment which contains all your elements. Note that this property is created after the view has been rendered.

Application application

The application. Views use the application to communicate with other parts of your program. The application also defines exactly how views behave through registered plugins.

Boolean visible

true if the view is visible. false if the view isn't.

DocumentFragment render()

Renders the view, and returns a document fragment

override didCreateSection()

Called when the section is created. This is called once during the lifetime of the view.

override willRender()

Called immediately before rendering the view

override didRender()

called immediately after rendering. At this point, all DOM elements should be created, and added to the view

remove()

Removes the view from the DOM

override willRemove()

called immediately before removing the view. Similar to willRender.

override didRemove()

called immediately after removing the view. Similar to didRemove.

Events

  • render - emitted when rendered
  • remove - emitted when removed
  • dispose - emitted when disposed

Property Scope

Views have the ability to inherit properties from their parent. Think of this a bit like variable scope. This mechanism is incredibly useful if you want to implicitly pass properties from one view to the other. For example:

Breaking Scope

In many cases, you might not want to inherit properties from the parent. To stop inheriting values, simply define whatever properties you want within each child view. This can be done either by setting properties in the prototype, or calling view.set(property, value). Here's an example:

The added benefit of breaking out of variable scope by defining them is that is also shows exactly what properties the view expects.

Extended API

Below are a list of optional extensions you can use for mojo views.

paper

Defined by the paperclip extension. The property expects either a compiled template (function), or string to compile. Here's an example:

bindings

Bindings allow you to compute properties on each view.

children

Children allow you to define child view controller which get added to the view controller. This allows a greater level of organization in your codebase. Here's an example of a basic view structure: