javascript - 如何使用 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