衝壓模板異步？競爭條件問題

Question

聚合物1.7

是否將模板標記爲異步操作？這不是I/O，所以我不知道爲什麼會這樣。但是，這裏有一個競爭條件，其中this.$$('#uploadedImage1')未定義。如果我使用<div hidden="[[foo]]">而不是template is="dom-if"，那麼它是有效的，所以這就是我知道這是一個競爭條件。

<template is="dom-if" if="[[uploadedImage1]]"> 
    <div id="uploadedImage1" class="row-image horizontal layout"> 
    </div> 
    </template> 
    ... 
    ready: function(e) { 
    function readURL(e) { 
     var el = e.target.id 
     var uploadedID = e.target.dataset.uploaded; 
     var file = Polymer.dom(e).localTarget.files[0]; 
     var reader = new FileReader(); 
     reader.onloadend =()=> { 
     this[uploadedID] = true; 
     //RACE CONDITION HERE 
     this.$$('#uploadedImage1').style.backgroundImage = `url(${reader.result})`; 
     } 
     reader.readAsDataURL(file); 
    } 
    this.$['images-container'].addEventListener('change', readURL.bind(this), false) 
    } 

Answer 1

簡答：是的，模板標記是異步的。在這裏，您可以使用綁定到style的屬性直接應用背景圖像，因此您不需要操作標記的DOM。

如果您確實需要獲取加蓋的DOM，您可以a）等待dom-change事件，或者b）通過調用render強制同步渲染。 （後者通常是一個反模式 - 你不想給力的東西，如果你沒有同步發生。）

https://www.polymer-project.org/1.0/docs/devguide/templates#synchronous-renders https://www.polymer-project.org/1.0/docs/devguide/templates#dom-change

注意文檔書面可能暗示只有dom-repeat呈現異步，但render和dom-change在這兩個元素上都可用。

希望有所幫助。