presentation-decorator

Augmented.js Presentation Decorator (MVVM) View Module

API

Table of Contents

• DirectiveView
  • Parameters
• DecoratorView
  • Parameters
  • events
  • events
  • remove
  • bindingAttribute
  • injectTemplate
    • Parameters
  • removeTemplate
    • Parameters
  • boundElement
    • Parameters
    • Examples
  • syncBoundElement
    • Parameters
  • syncAllBoundElements
  • addClass
    • Parameters
  • removeClass
    • Parameters
  • bindModelChange
    • Parameters
  • syncModelChange
    • Parameters
  • unbindModelChange
    • Parameters
  • unbindModelSync
    • Parameters
• ReactiveView
  • Parameters
  • render
  • remove

DirectiveView

Extends DecoratorView

A DecoratorView that is designed to use templates and clean up when removed.

Parameters

• options (optional, default {})

DecoratorView

Extends Colleague

DecoratorView
An MVVM view designed around decorating the DOM with bindings. This concept is designed to decouple the view from the backend contract. Although this is achieved via views in general, the idea is:

As a Javascript Developer, I'd like the ability to decorate HTML and control view rendering without the use of CSS selectors

Important to note: This view gives up it's template and events! This is because all events and templates are used on the DOM directly.
To add custom events, use customEvents instead of 'events'
supported annotations:

• data-click - calls a fucntion on click
• data-function - calls a function when change happens
• data-use-value - for checkboxes to use value vs toggle for data
• data-style - renders data (to a bound element) in a style of:
  • list
  • unordered-list
  • ordered-list
  • description-list

Parameters

• options (optional, default {})

events

Custom Events Property - merge into built-in events

events

Events Property - Do Not Override

remove

Remove method - Does not remove DOM elements only bindings.

bindingAttribute

bindingAttribute method - Returns the binging data attribute name

Returns string Binding attribute name

injectTemplate

injectTemplate method - Injects a template at a mount point

Parameters

• template string The template to inject
• mount Element The mount point as Document.Element or String

removeTemplate

removeTemplate method - Removes a template (children) at a mount point

Parameters

• mount Element The mount point as Document.Element or String
• onlyContent boolean Only remove the content not the mount point

boundElement

boundElement method - returns the bound element from identifier

Parameters

• id string The identifier (not id attribute) of the element

Examples

from HTML: <div data-myMountedView="something" id="anything"></div>
from JavaScript: let el = this.boundElement("something");

syncBoundElement

syncBoundElement - Syncs the data of a bound element by firing a change event

Parameters

• id string The identifier (not id attribute) of the element

syncAllBoundElements

syncAllBoundElements - Syncs the data of all bound elements by firing a change events

addClass

addClass - adds a class to a bount element

Parameters

• id string The identifier (not id attribute) of the element
• cls string The class to add

removeClass

removeClass - remove a class to a bount element

Parameters

• id string The identifier (not id attribute) of the element
• cls string The class to remove

bindModelChange

bindModelChange method - binds the model changes to functions

Parameters

• func func The function to call when changing (normally render)

syncModelChange

syncModelChange method - binds the model changes to a specified bound element

Parameters

• element Element The element to bind as Document.Element or string

unbindModelChange

unbindModelChange method - unbinds the model changes to elements

Parameters

• func func The function to call when changing (normally render)

unbindModelSync

unbindModelSync method - unbinds the model changes to a specified bound element

Parameters

• element Element The element to bind as Document.Element or string

ReactiveView

Extends DecoratorView

ReactiveView - A reactive model-change managed view using virtual dom for reactive web components

Parameters

• options (optional, default {})

render

Render the template (this.template)

Returns any this Context of the view

remove

Remove the view and all binds