</code></pre><p><a href="https://jsfiddle.net/gh/get/library/pure/vanjs-org/vanjs-org.github.io/tree/master/jsfiddle/advanced/advanced-state-derivation">Try on jsfiddle</a></p><h3 class="w3-large w3-text-red" id="conditional-state-binding"><a class="self-link" href="#conditional-state-binding">Conditional state binding</a></h3><p>In <a href="/tutorial#state-derived-prop" class="w3-hover-opacity"><code class="symbol">State</code>-derived properties</a> and <a href="/tutorial#state-derived-child" class="w3-hover-opacity"><code class="symbol">State</code>-derived child nodes</a>, it is guaranteed that the binding function will (only) be triggered when the dependency states change. This is true even for complex binding functions, who have different dependency states under different conditions.</p><p>For instance, the binding function <code class="language-js">() => cond.val ? a.val + b.val : c.val + d.val</code> will (only) be triggered by updates of state <code class="symbol">a</code>, <code class="symbol">b</code> and <code class="symbol">cond</code> if <code class="symbol">cond.val</code> is true, and will (only) be triggered by updates of state <code class="symbol">c</code>, <code class="symbol">d</code> and <code class="symbol">cond</code> if <code class="symbol">cond.val</code> is false. This can be illustrated with the code below:</p><pre><code class="language-js">const ConditionalBinding = () => {
0 commit comments