v0.9

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. 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)"
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-aech="getProducts() --product,key"

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

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