v0.8

DdListeners

class DdListeners extends Aux → file: mvc/DdListeners.js

The class DdListeners contains methods for parsing HTML elements with dd- attributes (directives). The parsed elements get attached listeners for DOM Events like click, keyup, change.

Instance

The ddlisteners instance is created in App.routes() method when controller is instantiated.

Properties

No properties associated with DdCloners class

Directives

dd-href | dd-href="url"

Href listener which changes the URL (browser history states).
NOTICE: The click on dd-href element will destroy current controller i.e. DdListeners.ddUNLISTEN() will be invoked.
EXAMPLE: 
<a href="/product/12" dd-href>Product 12</a> - when link is hovered the URL will be shown in browser status bar

<a href="" dd-href="/product/12">Product 12</a>



CONTROLLER PROPERTY CHANGERS

dd-set="controllerProperty [--convertType]"

Get the value from HTML form elements like INPUT, SELECT, TEXTAREA and when value is changed ("input" event) set the controller property.
It's simillar to dd-change where controller method is executed on the "input" event.
If this.$model is set then the HTML will be rendered.
The --convertType option will automatically convert the element value from string to certain type, for example: "5" (string) → 5 (number) or "true" (string) → true (boolean)
EXAMPLES: 
<input dd-set="myPet">
<select dd-set="$model.age --convertType">
<select dd-set="$model.user[{{ this.id }}]">   - mustache in the controller propery name definition

dd-model="controllerProperty [--convertType]"

Bind controller property and value of the view elements like INPUT, SELECT, TEXTAREA, ...etc in both directions.
When view is updated the controller property will be updated and when controller property is updated the view will be updated.
This is a shortcut of dd-set and dd-value, for example <input type="text" dd-input="$model.product" dd-set="$model.product"> is <input type="text" dd-model="$model.product">
The --convertType option will automatically convert the element value from string to certain type, for example: '{"a": 12}' (string) → {a: 12} (object)
EXAMPLES: 
dd-model="$model.product.name"   - will not convert the value type
dd-model="$model.product.price -- convertType"    - will convert price to number



CONTROLLER METHOD INVOKERS

dd-click="controllerMethod [--preventDefault]" | dd-click="(expression) [--preventDefault]"

Listen for click and execute the function i.e. controller method.
Option --preventDefault is usually used to block link to be opened.
EXAMPLES: 
<button dd-click="myFunc()">CLICK ME</button>

<button button dd-click="(alert('some alert'))">ALERT ME</button>

dd-enter="controllerMethod [--preventDefault]" | dd-enter="(expression) [--preventDefault]"

Parse the "dd-enter" attribute. Listen for the keyup/enter event (when ENTER key is pressed) on certain element and execute the controller method or expression.
Option --preventDefault is usually used to block a HTML form execution.
EXAMPLES: 
<input type="text" dd-enter="myFunc()">   - it will execute myFunc on every key

<input type="text" dd-enter="(alert('some txt')) --preventDefault">

dd-keyup="controllerMethod [--<keyCode>]" | dd-keyup="(expression) [--<keyCode>]"

Parse the "dd-keyup" attribute. Listen for the keyup event on certain element and execute the controller method or expression.
Option --keyCode defines the keyboard code. Attach the keyup event only to certain key code, for example --enter, --space, --tab.
EXAMPLES: 
<input type="text" dd-keyup="myFunc()">   - it will execute myFunc on every key

<input type="text" dd-keyup="myFunc() --enter">   - it will execute myFunc on Enter

dd-change="controllerMethod" | dd-change="(expression)"

Listen for HTML element value change (HTML form elements) and execute the controller method or expression.
EXAMPLES: 
<select dd-change="myFunc()"></select>

dd-evt="<controllerMethod1 | expression1> --eventName1 && <controllerMethod2 | expression2> --eventName2 && ..."

Listen for specific event and execute the controller method or JS expression. A complex event executions can be made by chaining multiple commands.
EXAMPLES: 
 dd-evt="mouseenter -- myFunc($element, $event, 25, 'some text')"  - $element and $event are the DOM objects of the dd-evt element
#### view ####
  <span style="font-weight:bold" dd-evt="
  runEVT($element, $event, 'red') --mouseenter &&
  runEVT($element, $event, 'green') --mouseleave &&
  runEVT($element, $event, 'blue') --click
  ">mouseenter, mouseleave and click this text</span>


#### controller ####
export default class DdEvtCtrl extends Controller {

  constructor(app) {
    super();
  }

  async __loader(trx) {
    // this.$debugOpts.ddEvt = true;
    this.setTitle('dd-evt');
    this.setDescription('The examples which shows how to use the DoDo Framework.');
    this.setKeywords('dodo, examples');
    this.setLang('en');
    this.loadView('#navbar', navbar);
    this.loadView('#main', ddEvt);
  }

  async __init() {
  }


  // change text collor on mouseover and click
  runEVT(elem, evt, boja) {
    // console.log('$element::', elem);
    // console.log('$event::', evt);
    elem.style.color = boja;
  }

}


Stackblitz Examples

  • dd-href - link to another page
  • dd-click - click event listener
  • dd-keyup - keyup event listener
  • dd-change - change event listener
  • dd-evt - chain any event listener
  • dd-set - set the controller property value (single direction from dd-set element to controller)
  • dd-model & dd-set - dd-model as replacement for dd-set with dd-value
  • dd-model - use dd-model in different form tags: input, checkbox, radio, select, textarea