Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
39 lines (27 sloc) 1.37 KB
title type order
Initialization
guide
6

Component Initialization

Linking to DOM

Although components can be defined in any moment of the website runtime - you can attach them in <head>, middle of the <body> or before the <body> end. What's important is when these components are initialized and linked to DOM. In Strudel linking and initialization happens when when browser triggers DOMContentLoaded event. It's best to have all the markup in-place before that event occurs.

Dynamic initialization

However if you would like to dynamically generate HTML that will components, Strudel is also capable of handling such situations. Strudel observes any DOM Changes and every update search for elements that match registered Component selectors. This way all dynamically components will be instantiated same way as the ones' loaded from server.

const ERROR = `<div data-msg="Unexpected error" class="error"></div>`;

@Component('loader')
class Loader() {
  init() {
     this.$element.append(ERROR);
  }	
}

@Component('error')
class Error {
  init() {
    this.$element.html(this.$data.msg);
  }
}

If somehow automatic DOM observations fails to instantiate the dynamic components you can manually trigger content:loaded event.

`Element.trigger` can be used for easier triggering of the `content:loaded` event