Google Polymer 创建菜单树
Posted
技术标签:
【中文标题】Google Polymer 创建菜单树【英文标题】:Google Polymer create menu tree 【发布时间】:2014-07-25 13:40:17 【问题描述】:我想使用聚合物核心菜单创建菜单树。我在数据库中有表:
表有子类别的类别。我想像菜单树一样显示它。我做了这样的事情:
<polymer-element name="category-list" attributes="show">
<template>
<style>
:host
display: block;
width: 100%;
.cat_item
margin: 10px;
background-color: rgb(255, 255, 255);
</style>
<category-service id="service" categories="categories"></category-service>
<core-menu selected="1" selectedindex="1" id="core_menu">
<template repeat="category in categories" id="t" if="category.has_child == '1'">
<core-submenu label="category.category_name" icon="settings" valueattr="name" class="cat_item">
<template ref="t" repeat="category in categories if="category.parent_id != '0'">
</template>
</core-menu>
</template>
</core-menu>
</template>
<script>
Polymer('category-list',
getParent: function(value)
);
</script>
</polymer-element>
但是我不能使用“if”,我做错了。我需要使用数据库表字段过滤显示子项。示例:
if(category.has_child == '1')
//display
if(category.parent_id != 0)
//display
我找到了官方的例子:
<template id="myTemplate">
Used by any template which refers to this one by the ref attribute
</template>
<template bind ref="myTemplate">
When creating an instance, the content of this template will be ignored,
and the content of #myTemplate is used instead.
</template>
但它并没有显示我想要的所有内容。请帮我解决这个问题。
【问题讨论】:
【参考方案1】:如果这是你的真实代码,那么一个错误是你没有用双胡须括住你的if
属性值,它应该是
<template repeat="category in categories" if="category.has_child == '1'" id="t">
另外,documentation 中的例子是
if=" conditionalValue "
注意它说的是conditionalValue,而不是expression。所以也许尝试一下
<template repeat="category in categories" if="category.has_child" id="t">
并确保category.has_child
的值有一个值,该值仅适用于那些确实有子类别的类别。
【讨论】:
感谢您的回复,但这对我不起作用。我认为是因为我的数据库字段中有“1”值,而不是“真”或“假”【参考方案2】:我创建了一个聚合物元素来从 JSON 创建一个菜单。它还有一些其他很酷的功能,我将继续增强它。如果您有任何问题/想法,请创建 github 问题/拉取请求
https://github.com/sup3rb0wlz/nb-menu
【讨论】:
以上是关于Google Polymer 创建菜单树的主要内容,如果未能解决你的问题,请参考以下文章
Polymer 的带有子菜单工具栏的 core-scroll-header-panel
Angular Dart 和 Polymer Dart 的区别