如何使用 dom-repeat 在 Polymer 1.0 中创建动态菜单

Question

首先，抱歉我的英语不好，这是我的第一个问题。我在使用 dom-repeat 创建动态菜单时遇到问题，这是我的模板：

<paper-menu class="list" on-iron-select="onMenuSelect" id="mainMenu" >
   <template is="dom-repeat" items="{{menu.Options}}" as="menu" id="iron_pages_app">
       <paper-item on-tap="funcion" data="{{menu}}"><iron-icon icon="{{menu.Icon}}"></iron-icon><span>{{menu.Name}}</span></paper-item>
       <template is="dom-repeat" items="{{menu.Options}}" as="sub" id="iron_pages_app_2">
           <paper-item on-tap="funcion_dos" class="olakease"><span style="padding-left: 3em">{{sub.Name}}</span></paper-item>
                <template is="dom-repeat" items="{{sub.Options}}" as="subDos">
                    <paper-item on-tap="funcion_tres"><span style="padding-left: 6em">{{subDos.Name}}</span></paper-item>
                </template>
        </template>
    </template>
</paper-menu>

如您所见，此代码尝试解决 polymer 1.0 没有子菜单的问题。数据渲染工作正常，所以我真正的问题是如何获取子元素的信息，因为如果我使用：

var item = this.$.iron_pages_app.itemForElement(e.target);

工作正常，但如果我尝试对“子菜单元素”做同样的事情，请不要显示任何内容。我试过：

var item = this.$$("#iron_pages_app_2").itemForElement(e.target);
var item = Polymer.dom(this.root).querySelector("#iron_pages_app");

有什么建议吗？谢谢

编辑

终于可以获取到每个子菜单的信息了，但是我觉得我的做法不对，这里是代码：

var item = e.model.__data__.sub;

其中“sub”是我的第二个 dom-repeat 的别名，任何人都可以帮助我提供更好的解决方案吗？再次感谢。

编辑

var menu = event.model.menu;
var sub = event.model.sub;
var subDos = event.model.subDos;

这工作正常，但在第三级无法访问子或菜单的信息，只是没有出现。

在“功能”中，我只需要有关此级别的信息。

在“funcion_dos”中我需要有关此级别和第一级别的信息。

在“funcion_tres”中，我需要有关前两个级别的信息。

我希望你能理解我，对不起我的英语。

Answer 1

如果您尝试访问点击事件处理程序中的项目，您应该能够使用 event.model.item 虽然您已经使用了 as 属性为项目属性分配不同的名称，以便您使用这些名称而不是 .item，例如 event.model.subDos

如何使用 dom-repeat 在 Polymer 1.0 中创建动态菜单

How to create a dynamic menu in Polymer 1.0 using dom-repeat

javascript

polymer

编辑

编辑