https://github.com/jimmy-collazos/lit-directive-subject

This is a directive of lit-html for update (async mode) parts of your template. Change any part of your template without re-rendering
https://github.com/jimmy-collazos/lit-directive-subject

Last synced: about 2 months ago
JSON representation

This is a directive of lit-html for update (async mode) parts of your template. Change any part of your template without re-rendering

• Host: GitHub
• URL: https://github.com/jimmy-collazos/lit-directive-subject
• Owner: jimmy-collazos
• License: gpl-3.0
• Created: 2021-01-19T08:56:27.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2021-01-23T07:50:25.000Z (almost 4 years ago)
• Last Synced: 2024-02-24T03:21:33.881Z (11 months ago)
• Language: JavaScript
• Size: 14.6 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Subject part directive of [lit-html]



  

  

  



This is a directive of [lit-html](https://lit-html.polymer-project.org/) for update (async mode) [parts](https://lit-html.polymer-project.org/api/interfaces/_lit_html_.part.html) of your template. Change any part of your template without re-rendering.

[🔗 See the demo](https://stackblitz.com/edit/lit-directive-subject-demo?file=index.js)

## Installation

Install from [NPM](https://www.npmjs.com/package/lit-directive-subject) or use from [Unpkg](https://unpkg.com/lit-directive-subject) CDN

**Npm**

```sh

npm install --save lit-directive-subject

```

**Unpkg**

```javascript

import {SubjetPartial} from 'https://unpkg.com/lit-directive-subject?module'

```

## API

## SubjetPartial

This is a class for create new partial context for updating in async mode.

### Methods:

* __part()__: directive for rendering values in you template

* __setValue(value)__: Set any value for rendering in your template

* __commit()__: Commit the current value and force to update template.

## Example:

```javascript

import {render, html} from 'lit-html'

import {SubjectPartial} from 'lit-directive-subject';

const partial = new SubjectPartial();

render(html`

  
Demo

  


    ${partial.part()}

  

  `, window.container);


// Async updating

(function update() {

  partial.setValue(Math.random())

  partial.commit();

  setTimeout(update, 1000);

})();

```