Question

我创建了dinamically paper-item，我希望在页面加载时获得第一个。这篇论文项目是在dom-repeat中创建的，如下所示：

<template is="dom-repeat" items="{{menu.Options}}" as="sub" id="iron_pages_app_2">
    <paper-item on-tap="funcion" class="olakease"><span>{{sub.Name}}</span></paper-item>
</template>

为了得到我想要的东西，我尝试在就绪和附加功能上使用它，但不起作用：

attached: function () {
    this.async(function () {
      console.log("______________________________________________________");
      var htmlCollection = document.getElementById("controlAppMenu").getElementsByTagName("paper-item");
      console.log("___________________htmlCollection___________________________________");
      console.log(htmlCollection);
      console.log("______________________________________________________");
      var className = this.getElementsByClassName('olakease');
      console.log("___________________getElementsByClassName___________________________________");
      console.log(className);
      console.log("______________________________________________________");
      console.log(htmlCollection.length) //show 0
      console.log(elements.length) //show 13
    });
}

控制台显示：

为什么getElementsByClassName有效，getElementsByTagName不？
在我的情况下，我需要获得第一个纸张输入，并使用类对我来说不好看。有人可以帮帮我吗？我希望你能理解我可怜的英语！

修改

这是我创建我的papaer-item的代码：

<div id="controlAppMenu">
<template is="dom-repeat" items="{{menu.Options}}" as="menu" id="iron_pages_app">
    <paper-item on-tap="toggle" pos="{{index}}" referencia$="{{menu.Id}}"><iron-icon icon="{{menu.Icon}}"></iron-icon><span>{{menu.Name}}</span></paper-item>
    <template is="dom-if" if="{{hasMenu(menu.Options)}}">
        <iron-collapse id="{{menu.Id}}" class="ironCollapseClass">
            <template is="dom-repeat" items="{{menu.Options}}" as="sub" id="iron_pages_app_2">
                <paper-item on-tap="funcion" padre$="{{menu.Id}}" class="olakease"><span style="padding-left: 3em">{{sub.Name}}</span></paper-item>
            </template>
        </iron-collapse>
     </template>
</template>
</div>

编辑2

我使用zerodevx的例子制作了JSBin。但我不能让它按我的意愿运作。调用附加函数意味着我可以使用dom元素，对吧？我的菜单是在ready函数中使用iron-ajax请求生成的，所以我有另一个问题，首先调用什么函数，附加函数或iron-ajax请求函数？（文档说here第一个准备好的函数，然后附加函数）我想这可能是这种情况下的真正问题。谢谢！

Answer 1

尝试将dom-repeat包装在容器中：

<div id="container">
  <template is="dom-repeat" items="{{menu.Options}}" as="sub" id="iron_pages_app_2">
    <paper-item on-tap="funcion" class="olakease"><span>{{sub.Name}}</span></paper-item>
  </template>
</div>

通过以下方式访问第一个paper-item内部容器：

this.$.container.querySelectorAll("paper-item")[0]

通常，在构建Polymer组件时，请避免使用像document.getElementById或document.getElementByClassName这样的vanilla javascript文档级别的东西。相反，在访问模板节点时，请使用像this.$或this.$$()或Polymer.dom(this)这样的Polymer内容。

在光/阴影/阴影DOM之间穿孔时，你可以省去很多麻烦。

更新1

您可以将呼叫置于attached回调中，但使用async打包，以确保查询仅在微任务完成后运行 - 在这种情况下，实际呈现dom-repeat模板本身。

<dom-module id="x-test"> <template> <div id="container"> <template is="dom-repeat" items="{{menu.Options}}" as="sub" id="iron_pages_app_2"> <paper-item on-tap="funcion" class="olakease"><span>{{sub.Name}}</span></paper-item> </template> </div> </template> </dom-module> <script> Polymer({ ... attached: function () { this.async(function () { var node = this.$.container.querySelectorAll("paper-item")[0]; console.log(node); }); } ... }); </script>

JSBin：http://jsbin.com/kovohuwuce/edit?html,console,output

Answer 2

After one and a half day of researching, I finally found a solution here and here. I need to call 'webcomponentsready' event to use all elements created.

var self = this;
window.addEventListener('WebComponentsReady', function(e) {
    // imports are loaded and elements have been registered
    console.log('Components are ready');
    var p = self.getElementsByTagName("paper-item");
    console.log(p);
});

如何使用tagName获取Polymer 1.0中的第一个纸质项目？

修改

编辑2

2 个答案: