Lazy Component

Lazy { /*Template*/ }

Sub-nodes of the component won't be rendered until it is required. It will be instead only one Node Comment added to the DOM, which is the placeholder for the future nodes.

API

• resolveLazy(?model) #

  • model: (optinal) When model is undefined, then the model object is taken, which was used during the first (initial) render process.

  Render the template to the document fragment, and then replace the placeholder with the nodes.

Inheritance

mask.define('MyComponent', mask.Compo('Lazy', {
	template: `button x-signal= 'click: message' > 'Greet'`,
	constructor () {
		setTimeout(() => this.resolveLazy(), 100);
	},
	slots: {
		message () {
			alert(this.model.name)
		}
	}
}));

$(body).appendMask('MyComponent', { name: 'Smith' });

define MyComponent extends Lazy {

	h4 > 'Hello'
}

As Self Component

Lazy #foo {
	h4 > 'hello'
}

app.find('#foo').resolveLazy();

onRenderStart and onRenderEnd are called after the component was resolved

Examples

• /examples

# install atma toolkit
npm install atma
# run server
atma server

# navigate `http://localhost:5777/examples/simple.html`

Test

npm test

©️ MIT - Atma.js Project