Использование JSON для создания основного ядра-ядра/основного подменю

Question

У меня возникают проблемы при использовании 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?) Или распространять классы и правильно щелкнуть, чтобы я мог расширить свое меню?

Answer 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> здесь.