ractivejs / ractivejs.github.io

https://ractive.js.org
8 stars 33 forks source link

Recursive component usage example (draft) #123

Open ceremcem opened 6 years ago

ceremcem commented 6 years ago

This is a draft for recursive component usage:

Example: Recursive Boxes

Boxes might contain some other boxes recursively:

boxes: [
  {width: 1, height: 2, boxes:[
      {width: 44, height: 55},
      {width: 66, height: 77, boxes: [
          {width: 88, height:99}
        ]}
    ]},
  {width: 3, height: 5}
]
  1. We can simply display these boxes by using "Partials": Playground link

  2. If we want to display an area property for each box, we may simply use data functions: Playground link

  3. To set height of the boxes by their "virtual" area property, we may use components: Playground link

Changes

fskreuz commented 6 years ago

So TL;DR:

Yes? If not, I'm not seeing the reason or goal.

ceremcem commented 6 years ago

Exactly, 2-way data flow is the main requirement here.

ceremcem commented 6 years ago

Two goals here:

  1. Demonstration of recursive partial usage
  2. Two way data flow of a virtual property