Improve documentation for skooma/bind
This commit is contained in:
parent
23f8a30af6
commit
8697c168dc
1 changed files with 21 additions and 24 deletions
|
@ -207,14 +207,10 @@
|
||||||
</dd>
|
</dd>
|
||||||
<dt>Transform function</dt>
|
<dt>Transform function</dt>
|
||||||
<dd>
|
<dd>
|
||||||
A function that takes the initial or updated state and returns a new
|
A function that takes the initial or updated state and returns a
|
||||||
HTML element.
|
new HTML element.
|
||||||
<details><summary>Planned feature</summary>
|
If the function returns a non-truthy value, the element won't be
|
||||||
When no HTML element is returned, nothing happens. This can be
|
replaced.
|
||||||
used to update the existing element instead; however, the
|
|
||||||
function currently provides no means to access the old element in
|
|
||||||
the transform function.
|
|
||||||
</details>
|
|
||||||
</dd>
|
</dd>
|
||||||
</dl>
|
</dl>
|
||||||
</p>
|
</p>
|
||||||
|
@ -225,23 +221,24 @@
|
||||||
be a function to register a callback to be called whenever the counter
|
be a function to register a callback to be called whenever the counter
|
||||||
gets updated.
|
gets updated.
|
||||||
</p>
|
</p>
|
||||||
<div class="columns">
|
<code-block>
|
||||||
<h3>Creating a new Element</h3>
|
// onIncrement doesn't return an initial state, so we have to wrap it:
|
||||||
<h3>Updating the old Element</h3>
|
let bindCount = bind(callback => counter.onIncrement(callback) || [counter.count])
|
||||||
<code-block>
|
|
||||||
let counterMessage = count =>
|
|
||||||
text`Current count: ${html.b(count)}`
|
|
||||||
// onIncrement doesn't return an initial
|
|
||||||
// state, so we have to wrap it:
|
|
||||||
let onIncrement = bind(callback =>
|
|
||||||
counter.onIncrement(callback) || counter.count)
|
|
||||||
|
|
||||||
return boundElement = onIncrement(counterMessage)
|
let counterMessage = count => text`Current count: ${html.b(count)}`
|
||||||
</code-block>
|
|
||||||
<code-block>
|
return bindCount(counterMessage)
|
||||||
// Not yet implemented
|
</code-block>
|
||||||
</code-block>
|
|
||||||
</div>
|
<p>
|
||||||
|
This can also be broken down to text nodes for more atomic updates.
|
||||||
|
</p>
|
||||||
|
<code-block>
|
||||||
|
// onIncrement doesn't return an initial state, so we have to wrap it:
|
||||||
|
let bindCount = bind(callback => counter.onIncrement(callback) || [counter.count])
|
||||||
|
|
||||||
|
return text`Current count: ${bindCount(text)}`
|
||||||
|
</code-block>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
When an element gets replaced with a newer version of itself, any variable
|
When an element gets replaced with a newer version of itself, any variable
|
||||||
|
|
Loading…
Reference in a new issue