Штамповочный шаблон Async? Вопрос о расе

Question

Polymer 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 отображается async, но render и dom-change доступны на обоих элементах.

Надеюсь, что это поможет.