diff --git a/page/skooma.html b/page/skooma.html index 85a1936..f310dff 100644 --- a/page/skooma.html +++ b/page/skooma.html @@ -207,14 +207,10 @@
Transform function
- A function that takes the initial or updated state and returns a new - HTML element. -
Planned feature - When no HTML element is returned, nothing happens. This can be - used to update the existing element instead; however, the - function currently provides no means to access the old element in - the transform function. -
+ A function that takes the initial or updated state and returns a + new HTML element. + If the function returns a non-truthy value, the element won't be + replaced.

@@ -225,23 +221,24 @@ be a function to register a callback to be called whenever the counter gets updated.

-
-

Creating a new Element

-

Updating the old Element

- - 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) + + // onIncrement doesn't return an initial state, so we have to wrap it: + let bindCount = bind(callback => counter.onIncrement(callback) || [counter.count]) - return boundElement = onIncrement(counterMessage) - - - // Not yet implemented - -
+ let counterMessage = count => text`Current count: ${html.b(count)}` + + return bindCount(counterMessage) + + +

+ This can also be broken down to text nodes for more atomic updates. +

+ + // 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)}` +

When an element gets replaced with a newer version of itself, any variable