在Polymer元素模板中访问div [英] Accessing a div inside of a Polymer element template

问题描述

我正在尝试在div上使用核心动画，以动画其位置.为此，我必须使用document.getElementById()进行选择. 问题是，我的index.html文件中的结构相当复杂，我找不到选择该div的方法.

I'm trying to use core-animation on a div, to animate its position. To do that, i have to select it with document.getElementById(). The problem is, i have a rather complex structure in my index.html file and i can't find a way to select that div.

这是index.html结构(我需要选择#el): http://i.imgur. com/phWyArO.jpg

Here's index.html structure (i need to select #el): http://i.imgur.com/phWyArO.jpg

我的index.html文件:

My index.html file:

    <template is="auto-binding" id="t">

  <!-- Route controller. -->
  <flatiron-director route="{{route}}" autoHash></flatiron-director>

  <!-- Keyboard nav controller. -->
  <core-a11y-keys id="keys" target="{{parentElement}}"
                  keys="up down left right space space+shift"
                  on-keys-pressed="{{keyHandler}}"></core-a11y-keys>
<core-header-panel>
<core-toolbar  class="panel-personal" hidden?="{{shortView}}">
...
</core-toolbar>
  <core-toolbar class="panel-nav">
    <paper-tabs valueattr="hash" selected="{{route}}" selectedModel="{{selectedPage}}"
                 on-core-select="{{menuItemSelected}}" link flex style="width:100%; height:100%;" id="tabs">
      <template repeat="{{page, i in pages}}">
          <paper-tab><a href="#{{page.hash}}">{{page.date_month}}<br/><small>{{page.date_year}}</small></a></paper-tab>
      </template>
    </paper-tabs>
</core-toolbar>
          <nav class="menu">
...
      </nav>


    <div horizontal layout fit>

      <core-animated-pages id="pages" selected="{{route}}" valueattr="hash"
                           transitions="slide-from-right"
                           on-tap="{{cyclePages}}" flex self-stretch>
        <template repeat="{{page, i in pages}}">
          <section hash="{{page.hash}}" class="card-wrapper">
            <div flex fit>
              <div class="card-container" vertical layout fit >
                <h1>{{page.name}}</h1>
                <h2>{{page.category}}</h2>
                <paper-button raised class="project_button"><a href="{{page.link}}" target="_blank"><core-icon icon="social:share" ></core-icon> visit project</a> </paper-button>
              </div>
              <div center-justified layout fit class="card-content">
                <div>
                  <h4>Project description</h4>
                  <p>{{page.desc}}
                  </p>
                </div>
              </div>
              <div class="card-background" id="el" fit></div>
            </div>
           </section>
        </template>
      </core-animated-pages>
    </div>

</core-header-panel>
</template>

我该如何选择#el div?

How can i select that #el div?

推荐答案

如果您的元素在模板中，则它不属于DOM，而是 有关该主题的文章和罗伯·多德森(Rob Dodson)写了有关影子DOM 基础的详细文章.

If your element is inside a template, then it does not belong to the DOM but the shadow DOM. As a complement, in the Web Components site there is an article on the topic and Rob Dodson wrote a detailed article about the basics of shadow DOM.

编辑:Polymer 1.0引入了一个特定概念， Shady DOM ...

Edit : Polymer 1.0 introduced a specific concept, Shady DOM...

我承认聚合物元素，多个模板和阴影DOM 之间的关系对我而言并不是很明显.乍一看，阴影DOM 与模板相关联.在那篇罗伯·多德森(Rob Dodson)的其他文章中，有关于模板重复的解释..似乎随着重复而变得微妙:这里您只有一个 shadow DOM ，并且ID变得毫无意义.更糟糕的是，我猜您由于嵌套模板而嵌套了 shadow DOM .对我而言，还不清楚的是:在这种情况下的可见性如何?

I admit the relationship between a polymer element, multiple templates and shadow DOM is not really obvious to me. At first glance, a shadow DOM is associated to a template. A few explanations are available in that other article by Rob Dodson about templates repetition. It seems with repetitions things become subtle: here you have a single shadow DOM and the ID becomes pointless. The worse is that I guess you have nested shadow DOMs because of the nested templates. What is not clear at all to me is here: what about visibility in such a context ?

编辑:有关可见性的更多信息，请参见稍后进行交换 ...

Edit : more informations about visibility are available in that later exchange...

编辑:模板重复语法已在 Polymer 1.0

Edit : template repetition syntax has evolved in Polymer 1.0

结论(据我了解)，由于模板重复，即使在重复的模板阴影DOM 中，您也可能具有多个相同的ID.有效的策略是使用类进行选择而不是使用ID .

As a conclusion (in my understanding), because of the template repetition you could have multiple identical IDs even inside the repeated template shadow DOM. The valid strategy would be to use a class for selection instead of an ID.

Javascript 是与 Polymer 元素并带有方法调用.要通过影子DOM 中的 Javascript 选择，您应该使用 querySelector .您为 document.getElementById()建议的解决方案对DOM有效.重点是关于嵌套模板.您可以通过关于该主题的另一交流来获得提示.建议使用 this.shadowRoot.querySelectorAll(...)解决方案，但这里:该文章中有一个样本看起来像您的问题.

Javascript is associated to a Polymer element with a method call. To select via Javascript in the shadow DOM, you should use the querySelector. The solution you suggested with document.getElementById() is valid for the DOM. The point is about nested templates. You have a hint with another exchange on the topic. A solution is suggested with this.shadowRoot.querySelectorAll(...) but an issue in the Polymer project covers the point: this could work but probably not a good practice. The details in the Polymer documentation about node finding are here: in that article there is a sample looking like your problem.

根据 Polymer 文档，当您调用 Polymer 元素方法时，假设您希望在 ready 事件中选择并在<在嵌套模板中分配的em> container ID，应该看起来像这样:

According to the Polymer doc, when you call the Polymer element method, assuming you want the selection in the ready event and a container ID assigned in your nesting template, this should look something like this:

<polymer-element name="my-element"...>
  <template ...>
    <div id="container">
      <template ...>
        ...
        <div class="el">
        </div>
        ...
      </template>
    </div>
  </template>
  <script>
Polymer('my-element', {
  ready: function() {
    this.$.container.querySelector('.el');
  }
});
  </script>
</polymer-element>

这篇关于在Polymer元素模板中访问div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！