Javascript 异步和聚合物

Question

我正在尝试为新的 jsfiddle 嵌入制作一个元素，它需要我即时更改用户名和 fiddle id（所以我制作了一些属性）。

但是脚本搜索 //jsfiddle.net///embed/ 我猜这意味着脚本标记在属性绑定之前被触发。这是我的代码。

<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<dom-module name="jsfiddle-demo">
  <template>
    <script async src="//jsfiddle.net/{{username}}/{{fiddle}}/embed/"></script>
  </template>
  <script>
    Polymer({
      is: 'jsfiddle-demo',
      properties: {
        username: {
          type: String,
          value: ''
        },
        fiddle: {
          type: String,
          value: ''
        },
      }
    });
  </script>
</dom-module>
<jsfiddle-demo username="link2twenty" fiddle="6ppzpuoq"></jsfiddle-demo>

和一个活跃的点赞JSFiddle

Answer 1

在将脚本标记添加到 DOM 时，用户名和 fiddle 属性实际上是空的。即使在更新它们之后，脚本也不会重新加载。

将脚本标记包装在 if 模板中，以便让聚合物将其添加到 DOM，仅当用户名和 fiddle 都存在时。

<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<dom-module name="jsfiddle-demo">
  <template>
    <template is="dom-if" restamp if="[[usernameAndFiddlePresent(username, fiddle)]]">
      <script async src="//jsfiddle.net/{{username}}/{{fiddle}}/embed/"></script>
    </template>
  </template>
  <script>
    Polymer({
      is: 'jsfiddle-demo',
      properties: {
        username: {
          type: String,
          value: ''
        },
        fiddle: {
          type: String,
          value: ''
        },
      },
      usernameAndFiddlePresent: function(username, fiddle) {
        return (username && fiddle); 
      }
    });
  </script>
</dom-module>
<jsfiddle-demo username="link2twenty" fiddle="6ppzpuoq"></jsfiddle-demo>

restamp 属性是关键。它告诉 polymer 将模板中的元素实际删除或添加到 DOM，而不仅仅是 showing/hiding 它们。
每次 fiddle 属性的用户名更改时都会计算表达式。

理论上，如果您想即时更改用户名或 fiddle，只需取消设置其中一个属性，然后将其重置为其他属性即可。这应该会为您提供一个具有不同 src 的新脚本标签。

Javascript 异步和聚合物

Javascript async and polymer

polymer

polymer-1.0