v1.1

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 DdListeners class

Directives

dd-href | dd-href="controllerProperty"

Href listener which changes the URL (browser history states).
When dd-href is used with no attribute value the app will take URL from href attribute.
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 similar 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 property 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 where $model is used, for example <input type="text" dd-value="$model.product" dd-set="$model.product"> is <input type="text" dd-model="$model.product">
If $model is omitted it will be automatically added. For example dd-model="var" is same as dd-model="$model.var"
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]"

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 dd-click="(alert('some alert'))">ALERT ME</button>

dd-enter="controllerMethod() [--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 Enter

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

dd-keyup="controllerMethod() [--<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()"

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() --eventName1 && controllerMethod2() --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="myFunc($element, $event, 25, 'some text') --mouseenter"  - $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();
  }

  // change text color on mouseover and click
  runEVT(elem, evt, color) {
    elem.style.color = color;
  }

}



ADVANCED LISTENERS (new in v1.1)

dd-outclick="controllerMethod()" NEW in v1.1

Fire the controller method when the user clicks outside the element.
Commonly used for closing dropdowns, modals, and tooltips.
EXAMPLE: 
<div class="dropdown" dd-outclick="closeDropdown()">
  <button dd-click="toggleDropdown()">Open</button>
  <ul dd-if="$model.isOpen">
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>
toggleDropdown() { this.$model.isOpen = !this.$model.isOpen; }
closeDropdown()  { this.$model.isOpen = false; }

dd-intersect="controllerMethod()" NEW in v1.1

Fire the controller method when the element enters the viewport (uses IntersectionObserver).
Ideal for lazy-loading images, triggering scroll animations, and infinite scroll.
EXAMPLE: 
<div dd-intersect="loadSection()">
  <!-- content loaded lazily when scrolled into view -->
</div>

<img dd-intersect="lazyLoadImage()" data-src="/img/photo.jpg" src="/img/placeholder.jpg">
loadSection() { /* fetch and render content */ }
lazyLoadImage(evt) {
  const img = evt.target;
  img.src = img.dataset.src;
}

dd-swipe="controllerMethod() [--left | --right | --up | --down]" NEW in v1.1

Fire the controller method on a touch swipe gesture. Use the optional direction filter to respond only to a specific swipe direction.
Useful for carousels, side drawers, and swipe-to-dismiss interactions.
EXAMPLE: 
<div class="carousel" dd-swipe="onSwipe() --left"> ... </div>
<div class="carousel" dd-swipe="onSwipe() --right"> ... </div>

<!-- handle all directions in one method -->
<div dd-swipe="handleSwipe($event)"> ... </div>
onSwipe() { this.nextSlide(); }
handleSwipe(evt) {
  if (evt.detail.direction === 'left')  this.nextSlide();
  if (evt.detail.direction === 'right') this.prevSlide();
}


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
  • dd-model - use dd-model in different form tags: input, checkbox, radio, select, textarea
  • dd-model & dd-set - dd-model as replacement for dd-set with dd-value