DC Examples

Simple example

To enable your component's logic on some DOM element you can either

• Add data-dc-${namespace} attribute to the element, when "namespace" is the value of the getNamespace() static method of the component class.
• If you can't or don't want to use default searching strategy pass second argument of the dcFactory.register to set css selector which will be used for searching elements

Call dcFactory.register with your components, and then starts the factory by calling dcFactory.init(document.body)

Lazy initialization

You can defer your components initialization by marking its element or any of its parents with data-dc-lazy attribute. Passing an additional argument withLazy equals false to dcFactory.init(element, withLazy = true) you can manage whether or not components which are marked as lazy should be created. It can be useful when some component(s) require specific action to become visible and interactive. (For example if you want to initialize components within the modal only when it is opened) After those action have happened you can call dcComponent(element, true) and all component within the element will be created despite the data-dc-lazy attribute

Example below shows that one of the message components won't be created until the button is clicked

Async Loading

You can defer your components loading by changing the way of registering components. This technique compliments Webpack dynamic imports: webpack creates a separate chunk for the component on the build step.

The second argument in dcAsync should be the component's namespace. This value will also replace components namespace static method so you don't have to declare component namespace twice.

The async loading is more powerful with lazy initialization. In this case, the component's chunk will be loaded only after dcFactory tries to initialize it.

In Network tab you can see that the whole code of the component is downloaded separately