attr-bind-change
v1.0.1
Published
2-way dom element binding
Downloads
8
Maintainers
maxgfellerReadme
attr-bind-change
This is just a fork of substack's attr-bind except that it only listens to onchange events and
not on keyup and keydown.
example
<!doctype html>
<html>
<body>
<div>
<label>Name:</label>
<input type="text" binder="user-name" placeholder="Enter a name here">
<hr>
<h1>Hello <span binder="user-name"></span>!</h1>
</div>
<script src="bundle.js"></script>
</body>
</html>var bind = require('attr-bind')();
var elems = document.querySelectorAll('*[binder]');
for (var i = 0; i < elems.length; i++) bind(elems[i]);or you can use attractor:
var bind = require('attr-bind')();
var attr = require('attractor')({ binder: bind });
attr.scan(document);Now the contents of the span tag update as you edit the input box.
If you want to capture the updated values programmatically, you can pass in an observable in place of an element:
var watch = require('observable')();
watch(function (value) {
console.log('value=' + value);
});
bind(watch, 'key');methods
var binder = require('attr-bind')var bind = binder()
Return a bind() function. Optionally you can pass in an
observable()-style
function watcher fn.
bind.call(ctx, elem, key)
Bind the element or observable elem to
the key at key.
Look at ctx.scope for scope information. If there isn't already an entry set
for ctx.scope[key], create a new scope entry with
observ.
- To update a observable, do:
ctx.scope[key].set(newVal). - To read an observable value, do:
ctx.scope[key](). - To track an observable's state, do:
ctx.scope[key](function (newVal) {}).
install
With npm do:
npm install attr-bindlicense
MIT