如何從模板元素中獲取子元素？

Question

dom-change事件對象e在Polymer.dom(e).localTarget給我<template is="dom-if"，因爲它應該。但我如何訪問孩子<div id="uploadedImage1"？ firstChild和firstElementChild爲空。

<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），該標記塊在物理上並不存在於主Document中，並且可以在運行時克隆並放入Document中。它不包含任何呈現的標記，因此您不能要求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事件上下文

您有一個合理的想法來使用Polymer的DOM方法來查找您想要的元素，但是在所有嘗試中，您都從事件目標（它是模板）的上下文開始。

同樣，該模板實際上並不包含您想要查找的元素，因此您將永遠不會在此處找到它。

瞭解聚合物的DOM基礎

你所引用的文件是用於訪問DOM輕落地兒到<container>。在你的情況下，你並沒有在你的元素陰影DOM中加入任何輕的DOM子元素。您正在使用dom-if模板根據狀態有條件地顯示/隱藏內容。

---

解決方案

你可以達到你想要通過簡單地詢問你的組件使用$$速記方法查找在組件的本地DOM元素是什麼。有一點需要考慮，因爲性能方面的原因，一旦條件變得很真實，聚合物會對dom-if模板的內容進行標記，然後使用CSS來顯示和隱藏它，所以它可能會使模板位於DOM中但未顯示。

這裏是工作示例的摘錄（見fiddle），它通過給該​​組件對象dom-change監聽器訪問（通過bind()）達到你的目標，因此它可以一）訪問組件的本地DOM找到元素和B ）考慮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。