DarkWiiPlayer
f612273632
This is partly to avoid confusion with the skooma `bind` function, but also to make it clearer that only the inner content of an element is being bound to the listener. This function may also disappear entirely in the future if it turns out it doesn't provide any benefits over the skooma bind function.
54 lines
1.6 KiB
Markdown
54 lines
1.6 KiB
Markdown
# Listener
|
|
|
|
A generator for proxy objects that run callbacks when properties are changed.
|
|
|
|
## Interface
|
|
|
|
```js
|
|
listener(target={})
|
|
// Creates a new proxy for target
|
|
listener.listen(prop, callback)
|
|
// Adds a callback on a property change
|
|
listener.listen([prop, ...], callback)
|
|
// Adds a callback to several properties at once
|
|
listener.listen(prop)
|
|
// Removes all callbacks from a given property
|
|
```
|
|
|
|
```js
|
|
bindContent(listener, "value")
|
|
// Returns a text node with listener.value as its content
|
|
// that will change whenever the value is changed
|
|
bindContent(listener, "value", html_element)
|
|
// Binds an existng HTML or Text node
|
|
bindContent(listener, "value", html_element, value => value.toUpperCase())
|
|
// Accepts a function to transform the value
|
|
bindContent(listener, "value", html_element, value => document.createElement("hr"))
|
|
// Also accepts HTML elements when the target is not a text node
|
|
```
|
|
|
|
This function *may* be **removed** in the future if it doesn't show any
|
|
usefullnes that isn't already provided by the skooma bind function.
|
|
|
|
## Example
|
|
|
|
```js
|
|
import Listener from 'listener.js'
|
|
const listener = Listener({})
|
|
|
|
// Listen for any changed property
|
|
listener.listen("*", (value, prop) => console.log(`${prop} changed to ${value}`))
|
|
|
|
// Listen only for changes to the foo property
|
|
listener.listen("foo", prop => console.log("it was foo, by the way"))
|
|
|
|
// Several listeners for one property are possible
|
|
// They will be executed in order of definition
|
|
listener.listen("foo", prop => do_something())
|
|
|
|
listener.foo = "New Value"
|
|
// Triggers 3 handlers
|
|
|
|
listener.bar = "New Value"
|
|
// Triggers only the * handler
|
|
```
|