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.
-
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.
-
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'
}
Lazy #foo {
h4 > 'hello'
}
app.find('#foo').resolveLazy();
onRenderStart
andonRenderEnd
are called after the component was resolved
# install atma toolkit
npm install atma
# run server
atma server
# navigate `http://localhost:5777/examples/simple.html`
npm test
©️ MIT - Atma.js Project