presentation-decorator

Augmented.js Presentation Decorator (MVVM) View Module

API

$3

- 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.

$3

- 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
  
  
  
  

$3

- options (optional, default {})

$3

Custom Events Property - merge into built-in events

$3

Events Property - Do Not Override

$3

Remove method - Does not remove DOM elements only bindings.

$3

bindingAttribute method - Returns the binging data attribute name

Returns string Binding attribute name

$3

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

$3

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

$3

boundElement method - returns the bound element from identifier

#### Parameters

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

#### Examples

``javascript
from HTML:


from JavaScript: let el = this.boundElement("something");
`

$3

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

#### Parameters

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

$3

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

$3

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

$3

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

$3

bindModelChange method - binds the model changes to functions

#### Parameters

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

$3

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

#### Parameters

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

$3

unbindModelChange method - unbinds the model changes to elements

#### Parameters

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

$3

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

$3

- options (optional, default {}`)

$3

Render the template (this.template)

Returns any this Context of the view

$3

Remove the view and all binds