Javascript 异步和聚合

Question

我正在尝试为新的 jsfiddle 嵌入制作一个元素，它需要我即时更改用户名和小提琴 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 时，用户名和小提琴属性实际上是空的。即使在更新它们之后，脚本也不会重新加载。

将脚本标签包装在 if 模板中，以便聚合物仅在用户名和小提琴都存在时才将其添加到 DOM。

<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 属性是关键。它告诉聚合物实际删除或添加模板内的元素到 DOM，而不是仅仅显示/隐藏它们。
每当小提琴属性的用户名发生变化时，都会评估该表达式。

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