Question

我试图从domReady中的脚本改变我的聚合物模板元素的DOM。在主模板中一切正常，我可以使用这个访问元素。$。xxx。但是如果我想要访问的元素在嵌套模板中，我就不能再访问它了。 Please see my Plunker

我用它来解决这个问题。$。myTemplate.content.querySelector可以工作（因为它可以在web组件应用程序中运行），但是我无法使用聚合物

解释起来并不容易，但如果你能打开我的Plunker，你就会看到我想要做的事情。

感谢您的帮助！

<!DOCTYPE html>
<html>

  <head>
    <script data-require="polymer@0.5.1" data-semver="0.5.1" src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.5.1/polymer.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <polymer-element name="my-polymer">
      <template>
        <b>TEST</b>
        <template id="myTemp">
          <div id="myID">
            AAA
          </div>
        </template>
      </template>
      <script>
        Polymer({
          domReady: function() {
            console.log(this.$.myID);
            console.log(this.$.myTemp);
            console.log(this.$.myTemp.querySelector('#myID'));
            console.log(this.$.myTemp.content.querySelector('#myID'));
          }

        });
      </script>
    </polymer-element>
    <my-polymer></my-polymer>
  </body>

</html>

Answer 1

您需要bind模板，以便它可以呈现内容：Plunk

<template id="myTemp" bind>
          <div id="myID">
            AAA
          </div>
</template>

如果您可以通过更新模板模型来解决问题，则应避免更改模板的DOM。例如，绑定一些对象＆lt; template bind =＆＃34; {{myObj}}＆＃34; ＆GT;然后使用对象的属性来改变模板数据。

访问subtemplate元素

1 个答案: