Как получить дочерний элемент из элемента шаблона?

Question

dom-change объект события e в Polymer.dom(e).localTarget дает мне <template is="dom-if" как следует. Но как мне получить доступ к ребенку <div id="uploadedImage1"? firstChild и firstElementChild - null.

<template is="dom-if" if="[[uploadedImage1]]"> 
    <div id="uploadedImage1" class="row-image horizontal layout"> 
     foo 
    </div> 
    </template> 

Я подумал, что мне нужно сделать еще один запрос от объекта localTarget, но не успех:

this.$['images-container'].addEventListener('dom-change', (e)=> { 
     var bob = Polymer.dom(e).localTarget; 
     var sue = Polymer.dom(bob).querySelector('div') 
     console.log(sue); 
    }); 

Я также попытался это ни к успеху:

this.$['images-container'].addEventListener('dom-change', (e)=> { 
     var bob = Polymer.dom(e).localTarget; 
     var sue = this.queryEffectiveChildren(bob); 
     console.log(sue); 
    }); 

---

this.$['images-container'].addEventListener('dom-change', (e)=> { 
     var bob = Polymer.dom(e).localTarget; 
     var sue = bob.getEffectiveChildNodes(); 
     console.log(sue); 
    }); 
    } 

От children length documentation example, даже Polymer.dom(this).children.length возвращается 0:

<dom-module id="image-uploader"> 
    <template> 
    <style include="iron-flex iron-flex-factors iron-flex-alignment"> 


    <div id="images-container" class="horizontal layout center wrap"> 

     <div hidden="[[uploadedImage1]]" class="layout vertical center-center"> 
     <div class="row-image horizontal layout"> 
      <input 
      type="file" 
      name="file" 
      data-uploaded="uploadedImage1" 
      id="image1" 
      accept="image/jpeg" 
      class="inputfile" /> 
      <label 
      for="image1" 
      id="image1" 
      class="image-show horizontal layout center center-justified"> 
      <iron-icon icon="add" prefix></iron-icon> 
      Upload Image 
      </label> 
     </div> 
     <i>*Main Image</i> 
     </div> 

     <template is="dom-if" id="foo" if="[[uploadedImage1]]"> 
     <div id="uploadedImage1"> 
      foo 
     </div> 
     </template> 

    </div> 

    </template> 

    <script> 
    Polymer({ 
     is: 'image-uploader', 
     properties: { 
     uploadedImage1: { 
      type: Boolean, 
      value: false 
     } 
     }, 
     ready: function(e) { 
      console.log(Polymer.dom(this).children.length); 

Answer 1

Есть несколько проблем, которые я вижу, так что я буду говорить через них и дать рабочий пример в конце.

Понимание template

<div id="uploadedImage1" ... элемент может и никогда не будет потомком dom-if шаблона, насколько локальный DOM вашего компонента обеспокоен.

В W3C Living Document тег template определяет кусок разметки (называемый DocumentFragment), который физически не существует в основном документе и может быть клонирован и помещен в документ во время выполнения. Он не содержит никакой рендеринговой разметки, поэтому вы не можете задать template о том, для чего он использовался в остальной части документа.

Чтобы проиллюстрировать реальный пример, рассмотрите штамп (шаблон) и лист бумаги (документ). Если вы печатаете штамп и нажимаете его на бумагу один или несколько раз, вы не можете смотреть на резиновую печать и знать, что, где или сколько раз оно запечатывало это изображение на бумаге. Чтобы получить эту информацию, вы должны посмотреть на бумагу.

Если добавить элемент контейнера вокруг шаблона, и зарегистрировать ее на консоль, вы увидите довольно ясно, что это выглядит с точки зрения документа:

<div id="container" class="style-scope my-el"> 
    <div id="uploadedImage1" class="style-scope my-el"> 
    foo 
    </div> 
    <template is="dom-if" id="foo" class="style-scope my-el"></template> 
</div> 

Понимание контекста в dom-change событий

У вас была разумная идея использовать метод DOM Полимера для поиска нужного элемента, однако во всех ваших попытках вы начинаете с контекста целевой цели, которая является шаблоном.

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

Понимание DOM Основы полимера

документации Вы ссылки для доступа Light DOM детей штампованных к <container>. В вашем случае вы не штамповки каких-либо светлых детей DOM в свои теневые объекты DOM.Вы используете шаблоны dom-if, чтобы условно отображать/скрывать контент на основе состояния.

---

Решение

Вы можете добиться того, что вы хотите, просто попросив свой компонент, чтобы найти элемент в локальном DOM вашего компонента с помощью стенографии методы $$. Одна вещь, которую следует учитывать по соображениям производительности, Полимер печатает содержимое шаблона dom-if, когда условие становится правдивым, а затем использует CSS для отображения и скрытия, поэтому может быть так, что шаблон находится в DOM, но не показан.

Вот отрывок из рабочего примера (см fiddle), который достигает свою цель, предоставляя доступ к dom-change слушателя к объекту компоненты (через bind()), поэтому он может а) доступ к локальному DOM компонента, чтобы найти элемент и б) рассмотреть вопрос о том, является ли условие dom-if правдоподобным.

this.$.foo.addEventListener('dom-change', function() { 
    if (this.prop1) { 
    console.log(this.$$('#uploadedImage1')); 
    } else { 
    console.log(null); 
    } 
}.bind(this)); 

Answer 2

Polymer.dom(e).localTarget.content дает мне доступ к documentFragment, по крайней мере, он работает на Chrome.