stimulus-data-bindings

@0.0.2 by Tomislav Simnett

One-way data binding controller for stimulus.js

Score: 2.0

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.

Installation

$ yarn add stimulus-data-bindings

Usage

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">
  <form>
    <input type="text" data-action="change->data-binding#update" data-binding-type="bind" data-to="output">
  </form>
  <div class="output">
    <div data-binding-ref="output" />
  </div>
</div>

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

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 (data-binding-type)

bind

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.

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

showIfChecked

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

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

hideIfBlank

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

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

Contributing

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.