diff --git a/listener.js b/listener.js index ba3d341..fc381a3 100644 --- a/listener.js +++ b/listener.js @@ -8,7 +8,7 @@ Example: l.contract = new Contract() */ -export default (target={}) => { +export const listener = (target={}) => { let callbacks = new Map() function listen(prop, callback) { if ("object" == typeof prop && "forEach" in prop) { @@ -38,3 +38,20 @@ export default (target={}) => { }) return proxy } + +export const bind = (listener, prop, target=document.createTextNode(""), filter) => { + const run = data => { + data = filter + ? filter(data) + : data + if ("innerText" in target) + target.innerText = data + else + target.data = data + } + listener.listen(prop, run) + run(listener[prop]) + return target +} + +export default listener diff --git a/listener.md b/listener.md index af18832..f198ac0 100644 --- a/listener.md +++ b/listener.md @@ -15,6 +15,16 @@ listener.listen(prop) // Removes all callbacks from a given property ``` +```js +bind(listener, "value") +// Returns a text node with listener.value as its content +// that will change whenever the value is changed +bind(listener, "value", html_element) +// Binds an existng HTML or Text node +bind(listener, "value", html_element, value => value.toUpperCase()) +// Filters the value through a function before setting it +``` + ## Example ```js