designer

designer.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../core-menu/core-submenu.html">
<link rel="import" href="../core-item/core-item.html">
<link rel="import" href="../core-icons/core-icons.html">
<script>
  PolymerExpressions.prototype.json = function(object) {
    return JSON.stringify(object);
  }
</script>

<polymer-element name="recursive-menu" attributes="items">
  
	<template>
    <core-menu selected="{{selected}}" selectedItem="{{item}}" on-core-select="{{onSelect}}">
      <template repeat="{{items}}" id="test">
          Item Plain:  {{ item }} 
          <br />
          Item JSON:  {{title | json}}  
          <br />
          Item.children JSON:  {{children | json}}      
          <br />
          Item.children.length:  {{children.length}}
          <br /> 
          <template if="{{children}}">          
            <template if="{{children.length > 0}}">
              <core-submenu label="{{ label }} submenu" icon="{{icon}}" >
                <!-- <template repeat="{{child, childIndex in item.children}}">
                    <core-item label="{{child.title}}">
                  </core-item>
                </template> -->
                <template ref="test" repeat="{{children}}"></template>
              </core-submenu>

            </template>
          </template>
          <template if="{{!children}}">
            <core-item label="{{ label }} item" icon="{{icon}}"  >
            </core-item>
          </template>
      </template>  
    </core-menu>
    <div>selected label: {{item.label}}</div>
    <div>selected item: {{selected}}</div>
  </template>
  <script>
    //{{ function(){ if (item.children.length > 0){console.log("RETURNING TRUE!!!"); return true;}else{console.log("RETRURNING FALSE"); return false;} } }}
    Polymer('recursive-menu',{
      onSelect:function(){
        debugger;
        		console.log(JSON.stringify(arguments[0]) + "        " + JSON.stringify(arguments[1]) + "     " + JSON.stringify(arguments[2]) );
        },
      created: function() {        
        this.selected = 0;
        this.items = [
          {"id":1, "label": "item 1", "action": "", "icon":"arrow-back", "children": [
              {"id":1, "label": "item 1-1", "action": "", "icon":"assignment-ind", "children":[
                  {"id":1, "label": "item 1-1-1", "action": "", "icon":"grade", "children":[
                    {"id":1, "label": "item 1-1-1", "action": "", "icon":"filter-list" }
                    ]
                  }
                ]
              },
                {"id":1, "label": "item 1-2", "action": "", "icon":"done-all", "children":[
                    {"id":1, "label": "item 1-2-1", "action": "", "icon":"folder" }
                  ]
                }
              ]
            },
            {"id":2, "label": "item 2", "action": "", "icon":"group-work", "children":[
                {"id":2, "label": "item 2-1", "action": "", "icon":"send-money" }
              ]
            },
            {"id":3, "label": "item 3", "action": "", "icon":"settings-backup-restore"},
            {"id":4, "label": "item 4","action": "", "icon":"shopping-cart"},
            {"id":5, "label": "item 5","action": "", "icon":"settings"}
          ]
      }
    });
    
  </script>
 
</polymer-element>