|
The attr helper can be used to add attributes to an HTML element. It is capable of converting properties that are set in Web Designer to HTML attributes.
Syntax
{{ attr "*" name="value" name="value"... }}
Parameters are optional. The first parameter is allowed to be "*". You can pass any number of name="value" pairs.
Example
<div {{attr "*" class="@useJQueryClasses:ui-widget-content"}}/>
The “*” as first parameter extracts all the WebDesigner properties that can be converted to attributes (e.g. uppercase converts to a class="Uppercase" attribute setting).
The second parameter is a conditional settings. If $.udb.settings.get("useJQueryClasses") translates to a boolean true, the attribute setting class="ui-widget-content" is added.
The following table adds comments and more examples of how attr adds attributes to the HTML element depending on arguments.
Argument
|
Result
|
"*"
|
Iterates all attributes of a JSON control definition and adds them in the correct attribute to the element. Some attributes are attributes of the element, others are added to the class or style attribute.
The target location can be influenced by another member of the factory called templateOptions.
$.udb.ui.registerControl("MenuControl", null, {
…
templateOptions: {
data: {
attributes: {
menuOrientation: function(value, options) {
return (value ? {attr: "class", value: value} : undefined);
}
}
}
},
…
};
|
attr="literal"
|
Adds an attribute with the name 'attr' to the element. The value of the attribute is equal to 'literal'.
{{attr class="mark-record"}}
|
attr="p.prop"
|
Adds an attribute with the name 'attr' to the element. The value of the attribute will be the value of the corresponding member in the JSON page definition.
{{attr "*" rows="props.size"}}
|
attr="[c]:t[:f]"
|
Adds an attribute with the name 'attr' to the element. The value of the attribute depends on the outcome of condition c. When the outcome evaluates to true or when no c-part is present the t-part is used, otherwise the f-part.
{{attr "*" class=":tree-node props.childNodes:closed:empty"}}
When the c-part start with a '@' the value of an application setting is evaluated.
{{attr "*" class="@useJQueryClasses:ui-widget-content"}}
|
attr="v1 v2"
|
Adds an attribute with the name 'attr' to the element. The value of the attribute depends on the evaluation of the separate values. The values are each evaluated as [c]:t[:f].
{{attr class=":record :props.alias"}}
|
|
