jquery-bindings

Simple two-way data binding using proxies and requestIdleCallback (661 Bytes gzipped)

Table of Contents

Table of Contents

Install

Install

Usage

API

Contribute

License

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.

API

$.bindings(object, options)

object

• Plain JS object

options

attribute

• Name of attribute to bind. defaults to data-bind

Contributing

Contributions are welcome!

1. Fork it.
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Or open up a issue.

License

Licensed under the MIT License.