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.
npm install mojo-views --save-exact
The view constructor.
properties- values to set onto the view. This could be anything.
application- (optional) the application.
Application.mainwill be set if this is omitted.
The virtual document fragment which contains all your elements. Note that this property is created after the view has been rendered.
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.
true if the view is visible.
false if the view isn't.
Renders the view, and returns a document fragment
Called when the section is created. This is called once during the lifetime of the view.
Called immediately before rendering the view
called immediately after rendering. At this point, all DOM elements should be created, and added to the view
Removes the view from the DOM
called immediately before removing the view. Similar to
called immediately after removing the view. Similar to
render- emitted when rendered
remove- emitted when removed
dispose- emitted when disposed
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:
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.
Below are a list of optional extensions you can use for mojo views.
Defined by the paperclip extension. The property expects either a compiled template (function), or string to compile. Here's an example:
Bindings allow you to compute properties on each view.
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: