Skip to content

HorionDigital/horion-observables-tracker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Horion Observables Tracker

SSR-first javascript framework for enabling two-way binding in uncomfortable places...

Getting started

import hot from hot

or for big boys and girls only...

import hot from 'horionObservables.js'

class myBinder extends hot {
    constructor() {
        super()
    }
    
    customMethods() {
        
    }
}

Usage

bind values in a familiar angular'esc style

<input type="range" hot-var="myVarName" />

display by binding the same value to another element or elements

<strong hot-var="myVarName"></strong>

the reason we are binding to an attribute is we are expecting for the initial values to come from the server on the initial load.

Assume we are using PHP rendered website here:

so we are able to fill in initial values from our server, and then HOT var will take it over as soon as first action is triggered - i.e. slider is moved.

<input type="range" hot-var="myVarName" value="<?=$someValueFromTheServer;?>" />
<strong hot-var="myVarName"><?=$someValueFromTheServer;?></strong>

Usage in javascript

now all you need to do to chnage the value on the html is to assign a new value to the hot variable like so:

hot.myVarName = newValue

this will change the value in the html instantly

Methods and Properties

onChange

hot.myVarName.onChange(val => console.log(val))

element

hot.myVarName.element.style.backgroundColor = 'black'

observer

hot.myVarName.observer.disconnect()

Plugins

Commign soon

About

SSR-first javascript library for two-way binding

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published