Доступ к div внутри шаблона элемента Polymer

Я пытаюсь использовать основную анимацию в div, чтобы оживить его положение. Для этого мне нужно выбрать его с помощью document.getElementById(). Проблема в том, что у меня довольно сложная структура в файле index.html, и я не могу найти способ выбрать этот div.

Вот структура index.html (мне нужно выбрать #el): http://i.imgur.com/phWyArO.jpg

Мой файл index.html:

    <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?


javascript polymer shadow-dom selector
person user3587590    schedule 18.02.2015    source источник
comment
Который 1_? Ваш <div class="card-background" id="el" fit></div> находится внутри <template repeat="{{page, i in pages}}">, поэтому потенциально в DOM может быть несколько div#el.   -  person Jeff Posnick    schedule 19.02.2015
comment
Верно. Я понял, что он создает 5 div с id = el, поэтому присвоение этому div идентификатора не работает. По сути, я пытаюсь анимировать этот div.card-background на странице, которая выбрана в данный момент. Когда страница выбрана, она имеет активный параметр и класс core-selected. Мне нужно запустить функцию play() для активного div страницы, но сначала мне нужно настроить таргетинг на нее, и я не знаю, как это сделать.   -  person user3587590    schedule 19.02.2015

Ответы (1)


arrow_upward
4
arrow_downward

Если ваш элемент находится внутри шаблона, то он принадлежит не DOM, а теневой DOM. В качестве дополнения на сайте веб-компонентов есть статья на эту тему и Роб Додсон написал подробную статью об основах теневого DOM. .

Изменить: Polymer 1.0 представил особую концепцию Shady DOM...

Я признаю, что взаимосвязь между полимерным элементом, несколькими шаблонами и теневым DOM не совсем очевидна для меня. На первый взгляд, теневой DOM связан с шаблоном. Несколько объяснений доступны в другой статье Роба Додсона о повторении шаблонов. Кажется, что с повторениями все становится тонко: здесь у вас есть один теневой DOM, и идентификатор становится бессмысленным. Хуже всего то, что я предполагаю, что у вас есть вложенные теневые DOM из-за вложенных шаблонов. Вот что мне совсем непонятно: как быть с видимостью в таком контексте?

Изменить: дополнительная информация о видимости доступна в которую позже обменяют...

Изменить: синтаксис повторения шаблона развился в Полимер 1.0

В заключение (в моем понимании) из-за повторения шаблона у вас может быть несколько идентичных идентификаторов даже внутри повторяющегося шаблона shadow DOM. Правильной стратегией было бы использование класса для выбора вместо идентификатора.

Javascript связан с Polymer с вызовом метода. Чтобы выбрать через Javascript в теневой DOM, следует использовать querySelector. Решение, которое вы предложили с помощью document.getElementById(), действительно для DOM. Речь идет о вложенных шаблонах. У вас есть подсказка с другим обменом мнениями по теме. Предлагается решение с this.shadowRoot.querySelectorAll(...), но проблема в проекте Polymer охватывает суть: это может работать, но, вероятно, не рекомендуется. Подробности в документации Polymer о поиске узлов: здесь: в этой статье есть пример, похожий на вашу проблему.

Согласно документу Polymer, когда вы вызываете метод элемента Polymer, предполагая, что вам нужен выбор в событии ready и контейнере идентификатор, назначенный в вашем шаблоне вложения, должен выглядеть примерно так:

<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>
person bdulac    schedule 19.02.2015