冲压模板异步？竞争条件问题

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 在两个元素上都可用。

希望对您有所帮助。

冲压模板异步？竞争条件问题

Stamping Template Async? Race condition issue

polymer

polymer-1.0