Have opinions about JavaScript? We want to hear them. Take the 2018 JavaScript Ecosystem Survey »

stimulus-data-bindings

0.0.2 • Public • Published

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.

install

npm i stimulus-data-bindings

Downloadsweekly downloads

5

version

0.0.2

license

MIT

homepage

gitlab.com

repository

Gitgitlab

last publish

collaborators

  • avatar
Report a vulnerability