Simple two-way data binding using proxies and requestIdleCallback (661 Bytes gzipped)
Inspired by a pen, simple data bindings that rely on Proxies (ensure this is polyfilled for older browsers) and requestIdleCallback (Shimmed if not available).
-
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-bindingsCreate 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 = 24See the example for more information.
- Plain JS object
- Name of attribute to bind. defaults to
data-bind
Contributions are welcome!
- Fork it.
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
Or open up a issue.
Licensed under the MIT License.
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent