使用JSON创建聚合物核心菜单/核心子菜单
Use JSON to create polymer core-menu/core-submenu
我在使用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-selected"类,而不是在它包含的core-item
或core-submenu
标签上。
我该如何:只使用原始核心菜单/核心子菜单/核心项标记(mutate innerHTML?appendChild?)来定义它,或者传播类并正确单击,以便扩展我的菜单?
答案是使用<template id/ref>
在不使用<x-menu-item>
的情况下在<x-menu>
内递归。
完整示例:
<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>
的直接子代。
相关文章:
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- Jquery菜单操作不稳定,定位不正确,存在一般错误
- 在使用Polymer'加载所有json文件后执行方法;s的核心ajax
- 可以't使用Polymer's的核心ajax
- angular的下拉菜单
- 使用JQuery的动态上下文菜单
- 创建带有和不带有JavaScript的Bootstrap下拉菜单
- 创建下拉菜单
- 下拉菜单在菜单按钮的边缘闪闪发光
- Div根据<选择>菜单
- I'我设计了一个下拉菜单,onclick会出现,而on blur会消失
- 硒IDE下拉菜单
- 将JavaScript弹出菜单转换为警报框
- 调整屏幕大小后不显示子菜单
- 聚合物0.5.5:核心列表中的条件模板和/或模板动态参考
- 固定位置菜单时滚动,直到它击中一个相对容器的底部
- 我的下拉菜单中的链接不起作用
- Bootstrap Dropdown selection是在*all*下拉菜单上设置选择
- Jquerymobile-使用javascript创建选择菜单
- 使用JSON创建聚合物核心菜单/核心子菜单