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 创建菜单树的主要内容,如果未能解决你的问题,请参考以下文章

Google Polymer:从元素外部监听属性变化

Polymer 的带有子菜单工具栏的 core-scroll-header-panel

Angular Dart 和 Polymer Dart 的区别

怎么评价Angular推出的Material,相比Polymer如何

第一个Polymer应用 - 准备工作

Bootstrap.js 在 Polymer 组件中不起作用