Package Exports
- lit-directive-reactive
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (lit-directive-reactive) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Social Media Photo by Ryan Stone on Unsplash
🔀 Directiva lit-html para la programación rectiva
This lit-html directive is for use some parts of your templates like an observable (Reactive programming).
Use with RxJs, most.js and xstream or wharever library with Observable and Subject implementation.
Installation
Install from NPM or use from Unpkg CDN
Npm
npm install --save lit-directive-reactiveUnpkg
import {subscribeDirective, toSubjectDirective} from 'https://unpkg.com/lit-directive-reactive?module'API
# subscribe(observable)
Support for AttributePart, BooleanAttributePart, EventPart, NodePart, PropertyPart
Update template Part value with received value on Observable (next method)
Parameters
- observable: Observable object to subscribe
Return value
return template Part of lit-html
Example
import {render, html} from 'lit-html'
import {subscribeDirective} from 'lit-directive-reactive';
import { Observable } from 'rxjs';
const counterObservable = new Observable(subscriber => {
let count = 0;
subscriber.next(count);
setTimeout(() => {
subscriber.next(++count);
}, 1000);
});
render(html`
<span> ${subscribeDirective(counterObservable)} </span>
<input value="${subscribeDirective(counterObservable)}" />
`, window.container);
# toSubject(subject)
Currently support for EventPart
Emit event value to Subject
Parameters
- subject: Subject to emit event value
Return value
return template Part of lit-html
Example
import {render, html} from 'lit-html'
import {toSubjectDirective} from 'lit-directive-reactive';
import { Subject } from 'rxjs';
const subject = new Subject();
subject.subscribe(ev => console.log(ev));
render(html`
<button @click=${toSubject(subject)}> +1 </button>
`, window.container);