v0.8

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



dd-foreach="controllerProperty --val,key" | dd-foreach="(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-foreach="users --user,key" equals to users.forEach((user,key) => {...})
  • use string interpolations ${...} within HTML
  • use JS functions in string interpolation, for example: ${Math.random() + key} or ${JSON.stringify(val)} within HTML
  • use string concatenation in string interpolation, for example: ${val.name + ' is the name'}
  • use controller properties in string interpolation, ${key + this.someNumber} → NOTICE: this is related to controller instance i.e. controller object
  • shorten this.val[key].id with doubledollar marks, for example $$val.id
The base parameter is controllerProperty (controller property) which can be used with or without this..
EXAMPLE: 
dd-foreach="myArr --val,key"   or   dd-foreach="this.myArr --val,key"
dd-foreach="$model.myArr --val,key"   or   dd-foreach="this.$model.myArr --val,key"
dd-foraech="(['a','b','c']) --val,key"

<p dd-foreach="names --val,key" dd-class="this.val[key].id">${key} ${val.name} -- ${val.age}</p>

or shorten with doubledollar
<p dd-foreach="names --val,key" dd-class="$$val.id">${key} ${val.name} -- ${val.age}</p>

dd-foreach-child="this.controllerProperty --val,key" | dd-foreach-child="forEachArg --val,key"

To represent two-dimensional data, such as an array of arrays, nest a dd-foreach-child element within dd-foreach element. This structure allows you to iterate through the outer array and, for each outer element, iterate through its inner array elements effectively, providing a clear and organized representation of your data.
The base parameter for dd-foreach-child can include:
    - this.controllerProperty - it refers to a controller property and must be prefixed with this.
    - forEachArg - this parameter corresponds to an argument of the outer dd-foreach element
This directive can be used only as the child of dd-foreach and the equivalent JS code will be: The equivalent code will be: 
this.companies.forEach((company, key) => {
  company.workers.forEach((worker, key2) => {
    ...
  });
});
EXAMPLE 1: Iterate through users and show only certain fields. The fields is array and it is defined as controller property. 
// controller
this.users = [
  {name: 'Pater Pan', age: 22, city: 'London'},
  {name: 'Ivan Ivić', age: 53, city: 'Zagreb'}
];
this.fields = ['name', 'age']; // only this user fields will be printed

// view
<tr dd-foreach="users --user,key">
  <td dd-foreach="this.fields --field"> ${user[field]} </td>
</tr>
EXAMPLE 2: Iterate through companies and print workers for each company. 
// controller
this.companies = [
  {name: 'One Ltd', workers: ['John', 'Sasa']},
  {name: 'Second Ltd', workers: ['Peter', 'Mark']}
];

// view
<tr dd-foreach="companies --company,key">
  <td dd-foreach="company.workers --worker,key2"> ${worker} </td>
</tr>

dd-foreach-grandchild="this.controllerProperty --val,key" | dd-foreach-grandchild="forEachChildArg --val,key"

The directive dd-foreach-grandchild can be nested within dd-foreach-child to represend 3-dimensional data.
The parameters for dd-foreach-grandchild can include:
    - this.controllerProperty - it refers to a controller property and must be prefixed with this.
    - forEachChildArg - this parameter corresponds to an argument of the outer dd-foreach-child element
EXAMPLE: 
// controller
this.$model.rows = [
  [[1, 2, 3], [4, 5, 6], [7, 8, 9]],
  [['A', 'B', 'C'], ['D', 'E', 'F'], ['G', 'H', 'I']]
];

// view
<table>
  <tr dd-foreach="$model.rows --row">
    <td dd-foreach-child="row --cell">
      <span dd-foreach-grandchild="cell --spanData">${spanData},</span>
    </td>
  </tr>
</table>

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

The dd-each directive is a simplified version of dd-foreach. It offers significantly improved performance by omitting the calculation of child and grandchild elements. Therefore, opt for dd-each whenever nesting child and grandchild elements is unnecessary for your specific use case.
  • define template variables with option --val,key
  • use string interpolations ${}
  • use JS functions in the string interpolation, for example: ${Math.random() + key} or ${JSON.stringify(val)}
  • use string concatenation in the interpolation, for example: ${val.name + ' is the name'}
  • use controller properties in the string interpolation, ${key + this.someNumber} → NOTICE: this is related to controller instance
  • shorten this.val[key].id with doubledollar marks, for example $$val.id
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-foraech="(['a','b','c']) --val,key"

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

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

Multiply element based on controllerProperty, on number or expression.
EXAMPLE: 
dd-repeat="myNumber"   or   dd-repeat="this.myNumber"
dd-repeat="$model.myNumber"   or   dd-repeat="this.$model.myNumber"
dd-repeat="(5)"
dd-repeat="(this.myNumber + 1)"

dd-mustache

Solve mustaches {{ }} in the element's innerHTML and attributes.
The mustache can contain standalone controller property {{this.$model.name}} or expression {{this.id + 1}}. The this. must be used.
EXAMPLE: 
<em dd-mustache>The product name is {{this.product_name}} made by {{this.$model.company_name}}</em>

<input type="text" placeholder="{{this.$model.myPlacholder}}" dd-mustache>


Stackblitz Examples