Jquery-bindings NPM

About

Inspired by a pen, simple data bindings that rely on Proxies (ensure this is polyfilled for older browsers) and requestIdleCallback (Shimmed if not available).

Install

Direct Download
Using cdn:

<script src="https://cdn.rawgit.com/tiaanduplessis/jquery-bindings/master/jquery-bindings.min.js"></script>
<!-- Or -->
<script src="https://unpkg.com/jquery-bindings/jquery-bindings.min.js"></script>

Using package manager:

$ npm install jquery-bindings
# OR
$ yarn add jquery-bindings

Usage

Create html with data-bind attributes:

<p>
    <label>First Name:</label>
    <input type="text" data-bind="firstName" />
    <label>Last Name:<label/>
    <input type="text" data-bind="lastName" />
    <br> Age:
    <input type="number" data-bind="age">
</p>

create a initial object and initialize $.bindings

var obj = {
  firstName: 'Tiaan',
  lastName: 'du Plessis'
}

var bindings = $.bindings(obj)

// bindings variable can be updated directly and trigger DOM updates
// DOM updates will trigger updates in the bindings variable 

bindings.firstName = 'Dupie'

// New properties can be added as long as the associated data-bind attribute exists
bindings.age = 24

See the example for more information.