Support class for view generators.
Provides number of helper methods useful for view generators building view DOMs such as applying view properties and binding to HTML templates or building child view DOMs.
- Version:
- 16.3.5
- Source:
- See:
Methods
(static) applyMap(template, map) → {String}
stable API
Applies object key-value pairs to the given string template.
This helper method for view generators allows you to define HTML for generated view DOMs in isolated template files containing placeholder tokens that are replaced with actual values at the time the generator is building the view's DOM.
It iterates over all key-value pairs in the object and replaces all
occurrences of all "$key$" tokens with the value
in the given template content.
Your template may contain placeholder tokens consisting of english
alphanumeric characters or underscores (_) only,
prefixed and suffixed with the dollar $ character, for example:
- $textValue$
- $text_value$
- $textValue123$
Tokens may be suffixed with a / directive specifying the
type of value conversion that will take place before replacing in the
template. This way you can easily tell Abcs to e.g. escape all special
characters to prevent from a text be interpreted as HTML.
/html- Replaces all occurrences of HTML special characters (
<, >, &, ") with HTML entities (<, >, &, "). That allows you to prevent from interpretting values as HTML or place tokens into attributes inside HTML tags. See the example below.
Parameters:
| Name | Type | Description |
|---|---|---|
template |
String | HTML template containing |
map |
Object | map with key-value pairs to apply onto the template. |
- Version:
- 16.3.5
- Source:
Returns:
template updated HTML template with applied replacements
- Type
- String
Examples
How to use applyMap
var htmlTemplate = '<p>$textValue$</p><p>$text_value123$</p>';
var tokenMap = {
textValue: 'VALUE 1',
text_value123: 'VALUE 2'
};
htmlTemplate = ViewGeneratorSupport.applyMap(htmlTemplate, tokenMap);
// htmlTemplate will contain:
// <p>VALUE 1</p><p>VALUE 2</p>How to use conversions
// without using conversion
var htmlTemplate = '<p data-custom="$attributeValue$">$textValue$</p>';
var tokenMap = {
textValue: '<p>TEXT</p>',
attributeValue: 'attribute "VALUE"'
};
htmlTemplate = ViewGeneratorSupport.applyMap(htmlTemplate, tokenMap);
// htmlTemplate will contain:
// <p data-custom="attribute "VALUE""><p>TEXT</p></p>
// which is obviously an invalid HTML
// now with conversions
htmlTemplate = '<p data-custom="$attributeValue/html$">$textValue/html$</p>';
htmlTemplate = ViewGeneratorSupport.applyMap(htmlTemplate, tokenMap);
// htmlTemplate will contain:
// <p data-custom="attribute "VALUE""><p>TEXT</p></p>(static) applyProperties(template, propertiesopt) → {String}
stable API
Applies Properties object to the given string template.
This helper method for view generators allows you to define HTML for generated view DOMs in isolated template files and apply view properties separately on the template content.
It iterates over all key-value pairs in the Properties object and
replaces all occurrences of the key with value
in the given template content.
See ViewGeneratorSupport.applyMap for the format of property tokens you can use in templates.
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
template |
String | HTML template containing |
|
properties |
pages.dt/js/api/Properties |
<optional> |
Properties object to apply to the template.
If |
- Version:
- 16.3.5
- Source:
- See:
-
- ViewGeneratorSupport.applyMap for the format of property tokens you can use in templates.
- Properties for how and when to use Properties object.
- Binding for how and when to use Binding object.
Returns:
template updated HTML template with applied properties
- Type
- String
Examples
How to write template files with property tokens
<div>
<p>$textValue$</p>
</div>How to apply properties to a template
define([
'pages.dt/js/api/ViewGeneratorSupport',
'text!myComponent/templates/componentTemplate.html' // see the above example for its content
], function (
ViewGeneratorSupport,
componentTemplate
) {
'use strict';
var MyViewGenerator = function() {
};
MyViewGenerator.prototype.buildView = function (view, page) {
var properties = view.getProperties();
var template = ViewGeneratorSupport.applyProperties(componentTemplate, properties);
var $element = $(template);
return $element;
};
return MyViewGenerator;
});(static) buildElement(view, page)
stable API
Builds the DOM tree for the given view.
Finds proper generator bound with the given view and runs it. This method is useful when your view contains child views and you intend to build them and append their DOM trees into the top view's DOM.
Parameters:
| Name | Type | Description |
|---|---|---|
view |
pages.dt/js/api/View | view to build DOM for. |
page |
pages.dt/js/api/Page | page containing the view. |
- Version:
- 16.3.5
- Source:
Example
Building DOM elements for child views
MyViewGenerator.prototype.buildView = function (view, page) {
// build view DOM element
var $element = $('<div>');
// iterate all children and build their DOM elements
view.getChildren().forEach(function (childView) {
// build child view element
var $childElement = ViewGeneratorSupport.buildElement(childView, page);
$element.append($childElement);
});
return $element;
};