使用JSON创建聚合物核心菜单/核心子菜单

问题描述：

使用JSON创建聚合物菜单时遇到了一些问题。使用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标记它包含的。

我该如何做：定义这个只用原始核心菜单/核心子菜单/核心项目标签（mutate innerHTML？appendChild？）或传播类和点击正确，所以我可以展开我的菜单？

答

答案原来是使用<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>直接孩子在这里的问题。

使用JSON创建聚合物核心菜单/核心子菜单

相关推荐