v0.8

Dd

class Dd extends DdCloners → file: mvc/Dd.js

The class Dd contains methods for parsing HTML elements with dd- attributes (directives). The parsed elements will not be cloned (non-cloner directives).

Instance

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

Properties

There's only one property associated with Dd class.
It's $dd property which is the object: {__initFinished, elems, listeners, noncloner_directives, cloner_directives}
Property Description Type Default
$dd.listeners collector of the dd- listeners [{attrName, elem, handler, eventName}] array []
$dd.noncloner_directives a list of directive which will not clone the HTML element array ['dd-setinitial', 'dd-elem', 'dd-if', 'dd-elseif', 'dd-else', 'dd-visible', 'dd-text', 'dd-html', 'dd-value', 'dd-disabled', 'dd-checked', 'dd-selected', 'dd-class', 'dd-style', 'dd-src', 'dd-attr',]
$dd.cloner_directives a list of directive which will clone (duplicate) the HTML element array ['dd-foreach', 'dd-repeat', 'dd-mustache']


Directives


COMMON OPTIONS
  • --forceRender - when used the framewrok will always render the dd- directive
    Explanation: Whenever there is a change in $model.prop, the rendering will include directives associated with $model.prop and directives involving specific JavaScript expressions (...). Additionally, the framework will render directives marked with the --forceRender directive.
    For example: dd-text="$model.prop", dd-text="(this.worker.name)" and dd-text="company.size --forceRender"



GENERAL DIRECTIVES

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

Get the DOM element value and set the controller property value at the very beginning when controller is executed i.e. when route is opened.
This directive can be applied on input, textarea or select tag.
EXAMPLE:
Take HTML form values and set the initial value of the controller property. 
<input value="bread" dd-setinitial="product">

or convert data type automatically, for example: '1971' convert to Number, or JSON to Object.
<input value="1971" dd-setinitial="year --convertType">
<input value="{\"name\": \"John Doe\", \"age\": 22}" dd-setinitial="$model.user --convertType">

dd-elem="$elemProp"

Transfer the DOM element to the controller property this.$elem.
$elemProp is the property of the this.$elem, for example dd-elem="myElement" → this.$elem.myElement
EXAMPLE:
Mark element in the HTML and transfer it to controller. 
<p dd-elem="paragraf">some text</p>

// fetch it with this.$elem.paragraf in the controller
const elem = this.$elem.paragraf;
const text = elem.innerText;
console.log(text); // prints 'some text'



WRITERS

dd-text="controllerProperty" | dd-text="(expression)"

Print pure text in the dd-text element. The HTML tags will not be interpreted.
EXAMPLE: 
dd-text="firstName"   - firstName is the controller property, it can also be model $model.firstname
dd-text="this.firstName"   - this. will not cause the error
dd-text="$model.product___{{this.id}}"   - dynamic controller property name with mustache
dd-text="(this.user ? this.user.name : '')"  - JS expression

dd-html="controllerProperty" | dd-html="(expression)"

Embed HTML node in the DOM at a place marked with dd-html attribute.
EXAMPLE: 
dd-html="product"
dd-html="this.product.name"
dd-html="$model.product.price"



ATTRIBUTE MANAGERS

dd-value="controllerProperty" | dd-value="(expression)"

Take controller property and set the element attribute and DOM property value. It's usually used to set the HTML form element value.
The controller property value is automatically converted to string.
EXAMPLES: 
<input type="text" dd-value="product">
<input type="text" dd-value="(this.product)">

<textarea dd-value="$model.productDescription"></textarea>

<select name="cars" id="cars" dd-value="$model.car">
  <option value="BMW">BMW</option>
  <option value="Audi">Audi</option>
  <option value="WV">WV</option>
  <option value="Toyota">Toyota</option>
</select>

dd-disabled="controllerProperty" | dd-disabled="(expression)"

Disable the HTML element by placing disabled attribute.
EXAMPLES: 
dd-disabled="isActive"   - isActive is the controller property, it can also be model $model.isActive
dd-disabled="this.isActive"   - this. will not cause the error
dd-disabled="(this.a < 5 && this.a>= 8)"   - expression
dd-disabled="(this.$model.name === 'John')"   - expression with model
dd-disabled="(this.$model.name_{{this.num}} === 'Betty')"   - dynamic controller property name (mustcahe)

dd-checked="controllerProperty" | dd-checked="(expression)"

Set the checked attribute in dependancy of the controller property value. Use it for checkbox or radio input elements only.
CHECKBOX → The controller value should be array of strings
RADIO → The controller value should be a string

dd-selected="controllerProperty [--multiple]" | dd-selected="(expression) [--multiple]"

Sets the selected attribute in dependancy of the controller property value. Use it for select input element.
SELECT-MULTIPLE → The controller value should be array of strings.
SELECT-ONE → The controller value should be a string.
EXAMPLES: 
dd-selected="selectedProducts --multiple"

dd-class="controllerProperty [--replace]" | dd-class="(expression) [--replace]"

Sets the class attribute with the controller property value. The controller property value should be an array of strings, for example: ['red-bold', 'centered-text']
The option --replace will empty class attribute first, then add new ones.
EXAMPLES: 
dd-class="myKlass" - add new classes to existing classes
dd-class="myKlass --replace" - replace existing classes with new classes

dd-style="controllerProperty [--replace]" | dd-style="(expression) [--replace]"

Sets the style attribute with the controller property value. The controller property value should be an object, for example: {'font-size': '25px'}
The option --replace will empty style attribute first, then add new ones.
EXAMPLES: 
dd-style="myStyle"   - add new styles to existing styles
dd-style="myStyle --replace"   - replace existing styles with new styles
dd-style="(this.age < 13 ? {color: 'red'} : {color: 'green'})"   - conditional styling

dd-src="controllerProperty [--<defaultSrc>]"

Set the element src attribute.
The option should contain default src URL which will be loaded if controllerProperty is undefined.
EXAMPLES: 
dd-src="imageURL"
dd-src="imageURL --https://via.placeholder.com/130"  - if the imageURL is undefined load https://via.placeholder.com/130

dd-attr="controllerProperty [--<attributeName>]"

Sets any attribute with the controller property value. The controller property value should a string.
The option defines the HTML Element attribute name, for example href.
EXAMPLES: 
<a href="" dd-attr="$model.myURL --href">   - sets href in the A tag



SWITCHERS

dd-if="controllerProperty" | dd-if="(expression)"

Hide element on falys value by setting style="display: none" or show it by removing it.
If dd-elseif and dd-else are used as siblings to main dd-if element it will create a dd-if group of elements.
EXAMPLE: 
dd-if="myBool" ; dd-else
dd-if="(this.x > 5)" ; dd-elseif="(this.x <= 5)" ; dd-else

<span>
  <b dd-if="(this.x === 2)">2</b>
  <b dd-elseif="(this.x === 5)">5</b>
  <b dd-else>not 2, not 5</b>
</span>

dd-visible="controllerProperty" | dd-visible="(expression)"

Show or hide the HTML element by setting style="visibility:'visible' | 'hidden'".
EXAMPLES: 
dd-visible="isActive"   - isActive is the controller property, it can also be model $model.isActive
dd-visible="this.isActive"   - this. will not cause the error
dd-visible="(this.a < 5 && this.a>= 8)"   - expression
dd-visible="(this.$model.name === 'John')"   - expression with model
dd-visible="(this.$model.name_{{this.num}} === 'Betty')"   - dynamic controller property name (mustcahe)


Stackblitz Examples