Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including stimulus-data-bindings with all npm packages installed. Try it out:

var stimulusDataBindings = require("stimulus-data-bindings")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

stimulus-data-bindings v0.0.3

One-way data binding controller for stimulus.js

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.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free