Riot.js: minimal observable example

by gianlucaguarini

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.1.1/riot+compiler.js"></script>
<category-management></category-management>

<script type="riot/tag">
  <category-management>
    <div class="category-container">
        <category each="{ categories }" depth="0"></category>
    </div>

		var self = this;


    self.categories = [{
    	name: "Clothes",
      parent: undefined,
      children: [{
      	name: "Shirts",
        parent: "Clothes",
        children: [{
        	name: "v necks",
          parent: "Shirts",
          children: []
        }]
      }]
    }];
  </category-management>

  <category>
      <span>
          <span onclick="{ toggle_expand_view }">{depth} {expanded} { name }</span>
          <p show="{ children.length > 0 }">
              <category each="{ children }" depth="{ this.parent.depth + 1 }" show="{ expanded }"></category>
          </p>
      </span>
      
      var self = this;

      self.depth = Number(self.opts.depth);

      self.on("mount", function () {
        // Start each child out as unexpanded
        self.children.forEach(function (item) {
          item.expanded = false;
        });
      });

      self.toggle_expand_view = function () {
        self.children.forEach(function (item) {
        	item.expanded = !item.expanded;
        });
      };
  </category>
</script>

JavaScript

riot.mount("*")