Component Tree
A component tree is a tree of components. Just like the DOM is a tree of DOM nodes.
Schematic example of a componentTree:
1
// - ComponentContainer (root)
2
// - Component 'Hero'
3
// - Component '2 Columns'
4
// - ComponentContainer 'main'
5
// - Component 'Title'
6
// - ComponentContainer 'sidebar'
7
// - Component 'Info-Box'
Copied!

Methods

Create components:

1
// Create a component
2
const title = componentTree.createComponent('title')
Copied!

Insert components:

1
// Insert a component at the beginning.
2
componentTree.prepend(title)
3
​
4
// Insert component at the end.
5
componentTree.append(title)
Copied!

Traverse and find components:

1
// Traverse through each component
2
componentTree.each((component) => {
3
// your code
4
})
5
​
6
// Traverse through each container
7
componentTree.eachContainer((container) => {
8
// your code
9
})
10
​
11
// Traverse through each component and container
12
componentTree.all((componentOrContainer) => {
13
// your code
14
})
15
​
16
// Find all components of a type
17
const subtitles = componentTree.find('subtitle')
18
if (subtitles.length) {
19
const subtitleComponent = subtitles[0]
20
}
21
​
22
// Get the first component in a document
23
const firstComponent = componentTree.first()
Copied!

Serialize:

1
componentTree.toJson()
Copied!
This method is called by Livingdoc.toJson() internally.

Development Helpers:

1
// Get a readable string of the whole componentTree
2
componentTree.print()
Copied!

Change Events:

A componentTree issues events whenever a change happens. You can subscribe to those events to get notified of changes. Internally views listen to the componentTree for changes to update the DOM.
  • componentAdded
    Get notified when a component was added
  • componentRemoved
    Get notified when a component was deleted
  • componentMoved
    Get notified when a component has changed its position
  • componentContentChanged
    Get notified when the content of a component changed. (E.g. the user has edited a text)
  • componentHtmlChanged
    Get notified when component settings changed. For example a css class.
  • changed
    Get notified of all changes in a document. Fires when any of the above events for any component fires.
Last modified 1yr ago