Add current property to skooma bound elements
Elements bound witht he skooma bind function now get a `current` property patched in.
This commit is contained in:
parent
60b40e2bc0
commit
694b4da6a4
2 changed files with 9 additions and 6 deletions
|
@ -85,10 +85,13 @@ const nameSpacedProxy = (options={}) => new Proxy(Window, {
|
||||||
|
|
||||||
export const bind = register => transform => {
|
export const bind = register => transform => {
|
||||||
let element
|
let element
|
||||||
|
const addCurrent = current => Object.defineProperty(current, 'current', {get: () => element})
|
||||||
element = transform(...register((...values) => {
|
element = transform(...register((...values) => {
|
||||||
element = element.replaceWith(transform(...values)) || element
|
const old = element
|
||||||
|
element = addCurrent(transform(...values))
|
||||||
|
old.replaceWith(element)
|
||||||
}))
|
}))
|
||||||
return element
|
return addCurrent(element)
|
||||||
}
|
}
|
||||||
|
|
||||||
export const handle = fn => event => { event.preventDefault(); return fn(event) }
|
export const handle = fn => event => { event.preventDefault(); return fn(event) }
|
||||||
|
|
|
@ -66,10 +66,6 @@ initial element from the initial state, which will be returned.
|
||||||
On every state change, the transform ation will be called on the new state to
|
On every state change, the transform ation will be called on the new state to
|
||||||
generate a new DOM Node, which replace the current one.
|
generate a new DOM Node, which replace the current one.
|
||||||
|
|
||||||
If the current node is not in the DOM yet, nothing will happen, and the new node
|
|
||||||
is thrown away. This "stale" node will not update until it has been placed in
|
|
||||||
the DOM *and* the next state change occurs.
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
bind(register)(html.div)
|
bind(register)(html.div)
|
||||||
// Returns a div element bound to register
|
// Returns a div element bound to register
|
||||||
|
@ -77,6 +73,10 @@ bind(register)(html.div)
|
||||||
// and html.div is a transformation from input state to a <div> node
|
// and html.div is a transformation from input state to a <div> node
|
||||||
```
|
```
|
||||||
|
|
||||||
|
Since references to the bound element can become stale, a `current` property
|
||||||
|
is set on every element that returns the current element. This will keep working
|
||||||
|
even after several state changes.
|
||||||
|
|
||||||
## handle
|
## handle
|
||||||
|
|
||||||
Since it is common for event handlers to call `preventDefault()`, skooma
|
Since it is common for event handlers to call `preventDefault()`, skooma
|
||||||
|
|
Loading…
Reference in a new issue