使用 JSON 创建聚合物 core-menu/core-submenu答案

【问题标题】：Use JSON to create polymer core-menu/core-submenu使用 JSON 创建聚合物 core-menu/core-submenu
【发布时间】：2014-10-23 20:07:27
【问题描述】：

我在使用 JSON 创建聚合物菜单时遇到了一些问题。

我有一个 JSON 结构，有点像 [{"name":foo, "children": [{"name":"bar"}]}, {"name": "arr", "children": []]

我想将其呈现为：<core-menu><core-submenu label="foo"><core-item label="bar"></core-submenu><core-item label="arr"></core-menu>

我试图用看起来像这样的代码来做到这一点：

<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>

但这对我根本不起作用：问题似乎是它在x-submenu 上设置了“核心选择”类，而不是在它包含的core-item 或core-submenu 标签上.

我该如何：只使用原始 core-menu/core-submenu/core-item 标记（突变 innerHTML？appendChild？）来定义它，或者正确传播类和点击，以便我可以展开我的菜单？

【问题讨论】：

标签： javascript polymer material-design

【解决方案1】：

答案是使用<template id/ref> 在<x-menu> 内部递归而不使用<x-menu-item>。

完整示例：

<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>

这巧妙地回避了我在原版中遇到的所有问题，因为<core-submenu> 和<core-item> 是<core-menu> 的直接子代。

【讨论】：