https://github.com/atmajs/compo-lazy
Deferred rendering
https://github.com/atmajs/compo-lazy
Last synced: 5 months ago
JSON representation
Deferred rendering
- Host: GitHub
- URL: https://github.com/atmajs/compo-lazy
- Owner: atmajs
- Created: 2014-09-18T19:54:14.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2017-10-11T20:13:07.000Z (almost 8 years ago)
- Last Synced: 2024-10-15T09:31:01.108Z (9 months ago)
- Language: JavaScript
- Size: 46.9 KB
- Stars: 1
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
### Lazy Component
[](https://travis-ci.org/atmajs/compo-lazy)
[](http://badge.fury.io/bo/compo-lazy)
```scss
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
```javascript
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' });
```
```mask
define MyComponent extends Lazy {
h4 > 'Hello'
}
```
### As `Self` Component
```mask
Lazy #foo {
h4 > 'hello'
}
```
```javascript
app.find('#foo').resolveLazy();
```
> `onRenderStart` and `onRenderEnd` are called after the component was resolved
### Examples
- [/examples](/examples)
```bash
# install atma toolkit
npm install atma
# run server
atma server
# navigate `http://localhost:5777/examples/simple.html`
```
### Test
```bash
npm test
```
:copyright: MIT - Atma.js Project