CODEWITHSUNDEEP
javascriptpolymermaterial-design
Jerub
Jerub

Reputation: 42638

Use JSON to create polymer core-menu/core-submenu

I am running into some problems when using JSON to create a polymer menu.

I have a JSON structure, somewhat like [{"name":foo, "children": [{"name":"bar"}]}, {"name": "arr", "children": []]

I would like to render this as: <core-menu><core-submenu label="foo"><core-item label="bar"></core-submenu><core-item label="arr"></core-menu>

I have attempted to do this with code that looks somewhat like:

<polymer-element name="x-menu-item" attributes="node">
  <template>
    <template if="{{ node.children.length == 0 }}">
      <core-item label="{{ node.name }}" link_path="{{ node.link_path }}">
        <a href="{{ node.link_path }}" target="_self"></a>
      </core-item>
    </template>
    <template if="{{ node.children.length > 0 }}">
      <core-submenu icon="expand-more" label="{{ node.name }}" valueattr="link_path">
        <template repeat="{{ child_node in node.children }}">
          <x-menu-item node="{{ child_node }}"></x-menu-item>
        </template>
      </core-submenu>
    </template>
  </template>
  <script>
    Polymer('x-menu-item', {
    });
  </script>
</polymer-element>

<polymer-element name="x-menu" attributes="nodes">
  <template>
    <core-menu>
      <template repeat="{{child_node in nodes}}">
        <x-menu-item node="{{child_node}}"></x-menu-item>
      </template>
    </core-menu>
  </template>
  <script>
    Polymer('x-menu', {});
  </script>
</polymer-element>

But this doesn't work for me at all: the problem seems to be that it is setting the 'core-selected' class on the x-submenu and not on the core-item or core-submenu tags that it contains.

How do I either: define this using nothing but raw core-menu/core-submenu/core-item tags (mutate innerHTML? appendChild?) or propagate the classes and clicks properly so I can expand my menu?

Upvotes: 1

Views: 813

Answers (1)

Jerub
Jerub

Reputation: 42638

The answer turns out to be to use <template id/ref> to recurse inside <x-menu> without using <x-menu-item>.

Complete example:

<polymer-element name="x-menu" attributes="nodes">
  <template>
    <core-menu>
      <template id="submenu" repeat="{{node in nodes}}">
        <template if="{{ node.children.length == 0 }}">
          <core-item label="{{ node.name }}" link_path="{{ node.link_path }}">
            <a href="{{ node.link_path }}" target="_self"></a>
          </core-item>
        </template>
        <template if="{{ node.children.length > 0 }}">
          <core-submenu icon="expand-more" label="{{ node.name }}" valueattr="link_path">
            <template ref="submenu" repeat="{{node in nodes}}></template>
          </core-submenu>
        </template>
      </template>
    </core-menu>
  </template>
  <script>
    Polymer('x-menu', {
      created: function() {
        this.nodes = [];
      }
    });
  </script>
</polymer-element>

This neatly sidesteps all the problems I was having in the original, as <core-submenu> and <core-item> are a direct child of <core-menu> here.

Upvotes: 2

Related Questions