compo-lazy
v0.8.8
Published
MaskJS lazy render component (Atma.js)
Downloads
5
Readme
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
andonRenderEnd
are called after the component was resolved
Examples
# install atma toolkit
npm install atma
# run server
atma server
# navigate `http://localhost:5777/examples/simple.html`
Test
npm test
:copyright: MIT - Atma.js Project