Google Polymer 创建菜单树答案

【问题标题】：Google Polymer create menu treeGoogle Polymer 创建菜单树
【发布时间】：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>

但它并没有显示我想要的所有内容。请帮我解决这个问题。

【问题讨论】：

标签： html menu tree repeat polymer

【解决方案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

【讨论】：