GravyBind

What is it?

Say hello to GravyBind! This utility lets you bind things in your HTML to JavaScript variables.

Let me start off by saying that this is not a good alternative to anything more fully-featured like Vue or React. This is meant for simple scenarios where you want to just add some dynamism to an application that's either simpler or older without making major changes or making a big mess.

In the case I originally created this for, we had a .NET Core MVC project with jQuery spaghetti that was quickly becoming a nightmare to maintain as the app's complexity increased. I needed a simple way to update things like display values, class bindings, and native HTML validation properties in a more declarative way than a bunch of random query selectors. GravyBind uses data attributes to handle binding, so your markup and bindings are in the same place and it's easy to see how things are connected. There is no change tracker, it literally refreshes all the bindings when you tell it to so this probably isn't the most optimized thing around. Feel free to open a pull request if you have some performance improvements in mind.

Again, if you're building a new app, I strongly recommend using a popular frontend framework or library. However when limitations prevent that, this can come in handy.

With that out of the way, let's take a look at what this can do!

Getting Started

Add a reference to the script

<script type="text/javascript" src="https://unpkg.com/gravy-bind/dist.browser/index.js"></script>

Create a binder

const binder = new GravyBinder();

Or provide a variable scope (default is just window)

const binder = new GravyBinder({firstName: '', lastName:''});

Or limit scanning to just part of the DOM tree

const binder = new GravyBinder(myScope, document.getElementById('rootNode'));

Usage

Built-in Bindings

Data tag	Direction	Description
data-in	Inward	Captures value from an input
data-display	Outward	Outputs content to innerHTML
data-min	Outward	Binds to min attribute of input
data-max	Outward	Binds to max attribute of output
data-disable	Outward	Controls disabled state of element
data-out	Outward	Sets the value of an input
data-class/data-class-condition	Outward	Applies the specified class when the condition is true
data-hide	Outward	Controls hidden state of element
data-show	Outward	Controls hidden state of element (inverse of data-hide)
data-min-length	Outward	Controls the minLength of an input
data-max-length	Outward	Controls the maxLength of an input
data-required	Outward	Controls the required attribute of an input
data-placeholder	Outward	Binds to the placeholder of an input
data-checked	Outward	Binds to the checked attribute of a checkbox
data-step	Outward	Controls the step of a range or number input
data-title	Outward	Sets the title attribute of a node
data-href	Outward	Sets the href of an anchor

Demo Class

This is an example of the JavaScript that things in this demo are bound to. It's defined by a class but you can use any object you like.

Display

Add/remove a class

Use a display: none class to hide stuff

Toggle color

Change the color

<input type="checkbox" data-in="this.toggleColor">
<div data-class="bg-success" data-class-condition="this.toggleColor">
    Change the color
</div>

Forms

General Input

Your input:

You can bind outputs to functions:

<input data-in="this.textInput" type="text">
<span data-display="this.textInput">
<span data-display="this.getStupidText(this.textInput)"></span>

Checkbox

This is a checkbox

Checkbox value is:

You can also put js right in the binding:

<input type="checkbox" data-in="this.checkInput">
<span data-display="this.checkInput"></span>
<span data-display="this.checkInput ? 'Yes' : 'No'"></span>

Outputting to an Input

Useful for setting hidden inputs to be submitted with a form

Pick one

You Picked

<select data-in="this.select">
    <option selected disabled value="">Open this select menu</option>
    <option value="Eeny">One</option>
    <option value="Meeny">Two</option>
    <option value="Miny">Three</option>
    <option value="Moe">Four</option>
</select>
<input data-out="this.select" disabled>

Min/Max

Min

Max

Range input

Numeral Input

<input data-in="this.min" type="number">
<input data-in="this.max" type="number">
<input data-min="this.min" data-max="this.max" data-in="this.range" type="range">
<span data-display="this.range"></span>
<input data-min="this.min" data-max="this.max" type="number">

Disable

Disable button

<input type="checkbox" data-in="this.disable">
<button data-disable="this.disable">Button :)</button>

Triggering

Immediate updates

By default, text inputs update on change or blur events. If you aren't worried about the performance implications and need something faster, you can add a data-immediate attribute to the element.

<input type="text" data-in="this.immediate" data-immediate"true">
<span data-display="this.getStupidText(this.immediate)"></span>

Manually refreshing

You can manually trigger a display refresh by calling updateOutwardBindings on your binder instance. This is useful if you changed some values via code or fetched some info in asynchronously.

<button onclick="dm.triggerRefresh()">Trigger update</button>
<span data-display="this.counter"></span>

Extending

Adding outward bindings

Additional bindings can be added by calling the registerOutwardBinding method on a GravyBinder. Pass in the name of the data attribute to use in kebab-case and an action to perform with the node and value when bindings are updated.

Set Alternate Text

Width

Height

this.binder.registerOutwardBinding('alt', (element, value) => element.alt = value);
this.binder.registerOutwardBinding('src', (element, value) => element.src = value);
getImageUrl = () => `https://via.placeholder.com/${this.width}x${this.height}`;

<input type="text" data-in="this.alt">
<input type="number" data-in="this.width" id="width">
<input type="number" data-in="this.height" id="height">
<img data-src="this.getImageUrl()" data-alt="this.alt" data-title="this.alt">