Tree view with Riot.js 2.0.12

by meetravi

HTML

<script src="https://cdn.jsdelivr.net/g/[email protected](riot.min.js+compiler.min.js)"></script>
<treeview></treeview>

<script type="riot/tag">
  <treeview>
  
    <ul id='treeview'>
      <li>
        <treeitem data={ treedata }></treeitem>
      </li>
    </ul>
  
    this.treedata = {
      name: 'My Tree',
      nodes: [
        { name: 'hello' },
        { name: 'wat' },
        {
          name: 'child folder',
          nodes: [
            {
              name: 'child folder',
              nodes: [
                { name: 'hello' },
                { name: 'wat' }
              ]
            },
            { name: 'hello' },
            { name: 'wat' },
            {
              name: 'child folder',
              nodes: [
                { name: 'hello' },
                { name: 'wat' }
              ]
            }
          ]
        }
      ]
    }
  </treeview>
  
  <treeitem>
  
    <div>
      { name }
    </div>
  
    <ul if={ isFolder() }>
      <li each={ child, i in nodes }>
        <treeitem data={child}></treeitem>
      </li>
    </ul>
  
    var self = this
    self.name = opts.data.name
    self.nodes = opts.data.nodes
  
    isFolder() {
      return self.nodes && self.nodes.length
    }
  </treeitem>
</script>

JavaScript

// Riot.js 2.0.12
riot.mount('*')