@statewalker/store-ui
v3.0.2
Published
Data Store binding for views and inputs
Downloads
44
Readme
@statewalker/store-ui: UI binding for Stores
This module provides binding between Stores (@statewalker/store) and DOM elements.
Methods:
extendInputStore(store)
- the main method of this library; it binds two additional store methods:store.bindView(view, keys, action)
- binds the givenview
DOM object to store values corresponding to the givenkeys
; if theview
is not defined then a newdiv
element is created; it uses internally thebindStoreView(..)
method described belowstore.bindStoreInput(key, configKey, input)
- binds the store values corresponding to thekey
parameter to input instances returned by theinput
function; if theconfigKey
parameter is defined then theinput
is called each time when these dependencies are changed
bindStoreView(store, view, keys, action)
- bind aview
(a DOM element) to thestore
; the specifiedaction
allows to update theview
each time when some fields (defined by thekeys
parameters) change its value.bindStoreInput(store, key, input)
- synchronizes the giveninput
to thestore
field defined by thekey
parameter; an input is a DOM element with thevalue
property and rising the "input
" event when user updates values; see the ObservableHQ inputs library (GitHub) for more information.bindConfigurableStoreInput(store, configKey, valueKey, input)
- binds input values to a specific field of thestore
defined by thevalueKey
parameter; theinput
function should return a new input instance and it is called each time when theconfigKey
field of thestore
changes its values
Used libraries in GitHub:
For working examples see this Observable Notebook:
- https://observablehq.com/@kotelnikov/observable-store-example
- https://observablehq.com/@kotelnikov/observable-store-description
- https://observablehq.com/@kotelnikov/observable-store