Directives

Accessing Directives

Directives are always part of a ComponentModel. On a component you can access the directives through the directives property which is a DirectiveColletion.
1
// get hold of a specific directive
2
const textDirective = componentModel.directives.get('title')
3
​
4
// loop through all directives on a component in the order
5
// they are defined.
6
for (const directive in componentModel.directives) {
7
directive.getContent()
8
}
9
​
10
// loop through each image directive on a component
11
componentModel.directives.eachImage((imageDirective) => {
12
imageDirective.getUrl()
13
})
14
​
15
​
16
// Get the number of directives of a certain type
17
// on a component.
18
// Possible types: 'editable', 'image', 'html', 'link', 'include'
19
const count = componentModel.directives.count('include')
Copied!

Directive Types

Text

type: 'editable' component template attribute: doc-editable
1
textDirective.setContent('Lorem Ipsum dolorem...')
2
const content = textDirective.getContent()
Copied!

Image

type: 'image' component template attribute: doc-image
Minimal Example:
1
imageDirective.setContent({url: 'http://images.com/1'})
Copied!
Most of the time you will want to have optimized delivery with an image service. For this width, height, mimeType as well as the imageService itself have to be specified when setting an url.
Real World Example with image service:
1
imageDirective.setContent({
2
url: 'http://images.com/1',
3
width: 400,
4
height: 300,
5
mimeType: 'image/jpeg',
6
imageService: 'resrc.it',
7
crop: {x: 100, y: 50, width: 200, height: 200},
8
origins: [{name: 'uez463x8ie39', identifier: 'hugo'}]
9
})
10
​
11
// Update the crop
12
imageDirective.setCrop({x: 0, y: 0, width: 250, height: 250})
Copied!

Html

type: 'html' component template attribute: doc-html
1
htmlDirective.setContent('<div>Moby Dick</div>')
Copied!
type: 'link' component template attribute: doc-link
1
linkDirective.setContent('http://www.test.com/')
Copied!

Include

type: 'include' component template attribute: doc-include
1
includeDirective.setContent({
2
service: 'list',
3
params: {foo: 'bar'}
4
})
5
​
6
// Retrieve the params set on a directive (this includes defaultParams
7
// specified in the component configuration if they have not been overwritten).
8
includeDirective.getParams()
9
​
10
​
11
// setParams overwrites all parameters of this include.
12
includeDirective.setParams({foo: 'bar'})
13
​
14
// addParams merges the specified params with the existing ones
15
// (including any default params that may have been set in the component
16
// configuration).
17
includeDirective.addParams({foo: 'bar'})
Copied!

Events

componentContentChanged

Whenever a directive is changed a componentContentChanged event is fired on the componentTree the componentModel is attached to. If the componentModel the directive belongs to is not attached to a componentTree no event is fired.
Last modified 1yr ago