v0.9

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. Additionally, the framework will render directives marked with the --forceRender directive. For example dd-text="$model.first_name" will be rendered on every $model.first_name change and dd-text="company.size --forceRender" on every $model property change.


EXPRESSIONS
The expressions are enclosed with round brackets. There are several condition types which can be used in dd- directives:
  • binary conditions - simple conditions with two parameters
    Examples: 
    dd-if="(!isActive)"
dd-if="(!!isActive)"  or just dd-if="(isActive)"
dd-visible="(x > $model.b)"
dd-disabled="($fridge.a > $model.b)"
  • ternary conditions - simple conditions with three parameters
    Examples: 
    dd-text="(!isActive ? 'No' : 'Yes')"   -- 2nd and 3rd operators are strings (closed in single quotes)
dd-class="$model.isRed ? ['text-red'] : ['text-green']"
dd-style="($model.x > b ? {color: 'green'} : {color: 'red'})"
dd-text="($model.x > b ? solution.a : solution.b)"   -- 2nd and 3rd operators are controller props
  • math - simple math equations with + - * / % and round brackets
    Examples: 
    dd-text="((x + 5) * $model.a)"
  • string concatenation - concate strings with + . The expression must contain plus and single quote.
    Examples: 
    dd-text="(user.first_name + ' ' + user.last_name`)"

The $fridge functions
The Dodo Framework allows you to define a function in the $fridge, making it accessible within dd directives. This fridged function can be used across multiple controllers or routes, ensuring consistent functionality throughout your application. 

// View HTML File
<select id="skript_id" name="skript_id" class="form-control">
  <option value=""></option>
  <option dd-each="skripts --skript,key" value="{{skript._id}}" dd-style="$fridge.ddstyle_username({{key}})">
    [{{skript.user_id.username}}] {{skript.category}} / {{skript.title}}
  </option>
</select>

// $fridge.js
import { corelib } from '@mikosoft/dodo';
import wsLib from './wsLib.js';

export default {
  wsLib,
  ddstyle_username: (key) => {
    const ctrl = corelib.navig.current.ctrl;
    const skript = ctrl.skripts[key];
    return ctrl.$model.loggedUser.username !== skript?.user_id.username ? { color: 'green' } : {};
  }
};



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

// 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.
The $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>

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



WRITERS

dd-text="controllerProperty [--pipe:stringFunction()]" |
dd-text="controllerMethod() [--pipe:stringFunction()]" |
dd-text="(expression)"

Print pure text in the dd-text element.
- The HTML tags will not be interpreted.
- Use --pipe:stringFunction() to make additional operation on a string. For example dd-text="desc --pipe:slice(0, 5)" will print this.desc.slice(0, 5)
- Use simple math operators + - / * % and round brackets to print math calculations.
- Use simple ternary conditions condition ? solution 1 : solution2.
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.name"   - example with reactive model property
dd-text="$model.product.description --pipe:slice(0, 55)"   - example with pipe
dd-text="printTxt('some string')"  - controller method which returns a string
dd-text="((a + $model.b) * $fridge.x / product.size)"  - math expression
dd-text="(a > $model.b ? 'YES' : 'NO')" - ternary expression

dd-html="controllerProperty [--pipe:stringFunction()]" |
dd-html="controllerMethod() [--pipe:stringFunction()]" |
dd-html="(expression)"

Embed HTML node in the DOM at a place marked with dd-html attribute.
- The HTML tags will be interpreted.
- Use --pipe:stringFunction() to make additional operation on a string. For example dd-text="sometext --pipe:replace(/a/g, 'A')" will print this.sometext.replace(/a/g, 'A')
EXAMPLE: 
dd-html="product"
dd-html="this.product.name"
dd-html="$model.product.price"
dd-html="printHtm('some <b>bold txt</b>')"
dd-html="((a + $model.b) * $fridge.x / product.size)"  - math expression
dd-html="(a > $model.b ? 'YES' : 'NO')" - ternary expression



ATTRIBUTE MANAGERS

dd-value="controllerProperty" | dd-value="controllerMethod()" | 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="setVal()">
<input type="number" dd-value="(x > a ? 3 : 5)">

<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="controllerMethod()" | dd-disabled="(expression)"

Disable the HTML element by placing disabled attribute. The condition operators: ! !== != === == > >= < <= && ||
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)" or just dd-disabled="(a < 5)" , also dd-disabled="(!$model.x)" - expression/condition
dd-disabled="isDisabled()"   - controller method

dd-checked="controllerProperty" | dd-checked="controllerMethod()" | 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="controllerMethod() [--multiple]" | dd-selected="(expression)"

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="controllerMethod() [--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="controllerMethod() [--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="setStyle() --replace"   - controller method

dd-src="controllerProperty [--<defaultSrc>]" | dd-src="controllerMethod() [--<defaultSrc>]" | dd-src="(expression) [--<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>]" | dd-attr="controllerMethod() [--<attributeName>]" | dd-attr="(expression) [--<attributeName>]"

Sets any attribute with the controller property value. The controller property value should be 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
<a href="" dd-attr="setUrl() --href">



SWITCHERS

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

Hide element on falsy 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.
The condition operators: ! !== != === == > >= < <= && ||
EXAMPLE: 
dd-if="myBool" ; dd-else
dd-if="condition('if')" ; dd-elseif="condition('elseif')" ; dd-else
dd-if="($model.a !== 'something')"
dd-if="(!$model.companies[0].opened)"
dd-if="(!!$model.companies[0].opened)"  or just  dd-if="($model.companies[0].opened)"

<span>
  <b dd-if="condition('if')">2</b>
  <b dd-elseif="condition('elseif')">5</b>
  <b dd-else>not 2, not 5</b>
</span>

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

Show or hide the HTML element by setting style="visibility:'visible' | 'hidden'".
The condition operators: ! !== != === == > >= < <= && ||
EXAMPLES: 
dd-visible="isActive"   - isActive is the controller property, it can also be model $model.isActive
dd-visible="this.$model.isActive"   - this. will not cause the error
dd-visible="isVisible()"   - controller method
dd-visible="($model.a !== 'something')"   - expression/condition


Stackblitz Examples