@0.0.3 by Tomislav Simnett

One-way data binding controller for stimulus.js

Score: 279.7

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 data-action attribute.


$ yarn add stimulus-data-bindings


Register the controller with Stimulus:

// application.js
import { Application } from 'stimulus';
import { DataBindingController } from 'stimulus-data-bindings'

const application = Application.start()
application.register('data-binding', DataBindingController)

Initialize the controller on a container element, then add bindings:

<div data-controller="data-binding" data-target="data-binding.container">
    <input type="text" data-action="change->data-binding#update" data-binding-type="bind" data-to="output">
  <div class="output">
    <div data-binding-ref="output" />

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

Output can be bound to multiple reference points by space separating the
reference names.

Types of binding (data-binding-type)


Sets the textContent of the bound element to the value of the input.

Set the data-to attribute to the data-binding-ref to attach this binding to.

<input type="text" data-action="change->data-binding#update" data-binding-type="bind" data-to="output">


Shows the bound element if the input is checked.

Set the data-show attribute to the data-binding-ref to show if the input is

<input type="text" data-action="change->data-binding#update" data-binding-type="showIfChecked" data-show="output">


Hides the bound element if the input has an empty value

Set the data-hide attribute to the data-binding-ref to hide if the input
value is blank (empty string).

<input type="text" data-action="change->data-binding#update" data-binding-type="hideIfBlank" data-hide="output">


Fork the project.

Install dependencies

$ 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.