LiveData.js

LiveData.js is a lightweight observable data holder class inspired from Google Android Jetpack library

Import using CDN

<script src="https://unpkg.com/js-livedata@1.0.2/livedata.min.js"></script>

Usage

const data = new LiveData()
// or instantiate with value
const data = new LiveData('Hello World!')

Observing a LiveData

const data = new LiveData()

data.observe(v => {
    console.log('observe', v)
})

Debounced and Throttled Mechanism

For debounced and throttled mechanism, the default delay are set to 500. You can change the delay in the second parameter.

Debounced Mechanism

const data = new LiveData()

data.observeDebounce(v => {
    console.log('observe', v)
})

Throttled Mechanism

const data = new LiveData()

data.observeThrottle(v => {
    console.log('observe', v)
})

Custom delay

const data = new LiveData()

data.observeDebounce(v => {
    console.log('observe', v)
}, 1300)

Set a Value

You can post a value and then all the observer getting instant notify.

const data = new LiveData()

data.observe(v => {
    console.log('observe', v)
})

data.postValue('Hello World!')

LiveValidator Class

This is an extension class which is quite useful to validate an input form.

const validator = new LiveValidator()
// or with defined keys
const validator = new LiveValidator(['username', 'password'])

Observing a LiveValidator

The callback return two value which is validity value (boolean) and the Map object. With validity boolean value you can do anything like disabling a button for a login form. For more demo you can check out the LiveData.js page

validator.observe((validity, map) => {
    console.log('validator', validity, map)
})

Set a key validity

You can define how you validate the data in here, the first parameter are key (string) and the second one is a boolean.

validator.set('username', someValue != '' && someValue.length >= 8)