スタンピングテンプレート非同期？競争状態の問題

Question

ポリマー1.7

テンプレートを非同期操作にスタンプしていますか？それはI/Oではないので、なぜそれがどうなるのかわかりません。ただし、this.$$('#uploadedImage1')が未定義の競合状態があります。 template is="dom-if"の代わりに<div hidden="[[foo]]">を使用すると動作しますので、これが競合状態であることがわかります。

<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が使用可能です。

希望に役立ちます。