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

希望有所帮助。

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

1 个答案: