Stimulus Data Bindings
Stimulus controller to provide one-way data bindings from form input.
Automatically sets bindings on connection to the DOM, and can perform updates
on any event via a
$ yarn add stimulus-data-bindings
Register the controller with Stimulus:
// application.js;const application = Applicationstartapplication
Initialize the controller on a container element, then add bindings:
All input elements to be bound require at least a
data-action calling the
update method, and a
data-binding-type determining what type of binding to
Binding types can be space separated to provide multiple bindings on a single input.
Output can be bound to multiple reference points by space separating the reference names.
Types of binding (
textContent of the bound element to the value of the input.
data-to attribute to the
data-binding-ref to attach this binding to.
Shows the bound element if the input is checked.
data-show attribute to the
data-binding-ref to show if the input is
Hides the bound element if the input has an empty value
data-hide attribute to the
data-binding-ref to hide if the input
value is blank (empty string).
Fork the project.
$ yarn install
Start the test watcher
$ yarn test:watch
Running one-off test runs can be done with:
$ yarn test
Write some tests, and add your feature. Send a PR.