v1.1

DdCloners

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

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

Instance

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

Properties

No properties associated with DdCloners class

Directives


COMMON OPTIONS
  • --forceRender - when used the framework 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
Expressions are enclosed in parentheses. Various condition types can be used within dd- directives, as previously detailed here.

dd-each="controllerProperty --val,key" | dd-each="controllerMethod() --val,key" | dd-each="(expression) --val,key"

Generate multiple HTML elements based on an array stored in a controller property.
  • define template variables with option --val,key, for example: dd-each="users --user,key" equals to users.forEach((user,key) => {...})
  • use mustaches {{val}} within HTML
  • use doubledollar to shorten this.val[key].id, for example dd-each="users --user,key" dd-text="printName({{key}}, $$user)"
  • use --selected:N on <option> elements to pre-select the Nth clone (0-based index); prevents the template mustache from appearing as the default value in a <select>
EXAMPLE: 
dd-each="myArr --val,key"   or   dd-each="this.myArr --val,key"
dd-each="$model.myArr --val,key"   or   dd-each="this.$model.myArr --val,key"
dd-each="getProducts() --product,key"

<p dd-each="users --user,key" dd-class="$$user.id">{{key}} {{user.first_name}} -- {{user.age}}</p>

<p dd-each="categories --category" class="fa {{category.fa_icon}}">{{category.name}}</p>

<!-- pre-select first country so the <select> does not display the raw {{country}} template -->
<select dd-set="$model.selected_country">
  <option dd-each="countries --country,key --selected:0" value="{{country}}">{{country}}</option>
</select>

dd-each2="iteratorItem.subProperty --val,key" NEW in v1.1

Iterate over a nested sub-array within a dd-each loop. Must be used inside an element that already has dd-each.
  • Resolves sub-array paths like user.addresses relative to the current dd-each item
  • define template variables with option --val,key
  • use mustaches {{val}} within HTML
  • use --selected:N on <option> elements to pre-select the Nth clone (0-based index)
EXAMPLE: 
<!-- outer loop -->
<div dd-each="$model.users --user,i">
  <b>{{user.name}}</b>
  <!-- nested inner loop -->
  <span dd-each2="user.addresses --addr,j">{{addr.city}}</span>
</div>

dd-entries="controllerProperty --key,val" | dd-entries="controllerMethod() --key,val" NEW in v1.1

Iterate over an object's key-value pairs (like Object.entries()).
  • define template variables with option --key,val
  • use mustaches {{key}} and {{val}} within HTML
EXAMPLE: 
// Controller
this.$model.config = { host: 'localhost', port: 3000, debug: true };

// View
<tr dd-entries="$model.config --key,val">
  <td>{{key}}</td>
  <td>{{val}}</td>
</tr>

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

Multiply element based on controller property number or number returned from controller method.
EXAMPLE: 
dd-repeat="myNumber"   or   dd-repeat="this.myNumber"
dd-repeat="$model.myNumber"   or   dd-repeat="this.$model.myNumber"
dd-repeat="multiply(5)"


Stackblitz Examples