Question

我想使用聚合物核心菜单创建菜单树。我在数据库中有表：

enter image description here

表包含子类别的类别。我想像菜单树一样显示它。我做了这样的事情：

<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>

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

Answer 1

如果这是你的真实代码，那么有一个错误就是你没有将你的if属性的值括在双胡子中，它应该是

<template repeat="{{category in categories}}" if="{{category.has_child == '1'}}" id="t">

此外，documentation中的示例是

if="{{ conditionalValue }}"

注意它是 conditionalValue ，而不是表达式。所以也许只试试

<template repeat="{{category in categories}}" if="{{category.has_child}}" id="t">

并确保category.has_child的值只有那些有孩子的类别才有真正的价值。

Answer 2

我创建了一个聚合物元素来从JSON创建一个菜单。它有一些其他很酷的功能，我将继续增强它。如果您有任何问题/想法，请创建一个github问题/拉取请求

https://github.com/sup3rb0wlz/nb-menu

Google Polymer创建菜单树

2 个答案: