Parent and Cascade binding

[DrSensor]

• [ ] #36
• [ ] data-cascade attribute
• [ ] data-parent attribute
• [ ] use the attribute value as the depth of binding

<render-scope data-cascade>
  <link href=counter.js>

  <button :: on:click=increment>increment</button>

  <render-scope>
    <link href=counter.js>

    <button :: on:click=increment @text:="count &count"/>
  </render-scope>
</render-scope>

same as

<render-scope>
  <link href=counter.js>

  <button :: on:click=increment>increment</button>

  <render-scope data-parent>
    <link href=counter.js>

    <button :: on:click=increment @text:="count &count"/>
  </render-scope>
</render-scope>

To turn off prefix &

<render-scope>
  <link href=counter.js>

  <button :: on:click=increment>increment</button>

  <render-scope data-isolation=open>
    <link href=counter.js>

    <button :: on:click=increment @text:="count"/>
  </render-scope>
</render-scope>

It also possible to alias the parent data

• data-cascade aliasing still require prefix &

• data-parent aliasing doesn't require prefix &

  <render-scope data-cascade="increase=increment">
  <link href=counter.js>
  
  <button :: on:click=increment>increment</button>
  
  <render-scope data-parent="number=count">
  <link href=counter.js>
  
  <button :: on:click="increment &increase" @text:="count number"/>
  </render-scope>
  </render-scope>

• aliasing support glob or RegEx pattern, but to avoid repetitive RegEx compilation:
  • RegEx pattern is detected if value startWith('^') or endWith('$')
  • otherwise use simple glob pattern

    <render-scope data-cascade="numberOf$<name>=^count(?<name>[A-Z]\w+)$">
    </render-scope>
    <render-scope data-cascade="numberOf*=count*">
    </render-scope>

---

Note on Granular Data Cascade only data-cascade allowed on <link>

<link href=counter.js data-cascade>