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-template中，以便只有当用户名和小提琴都存在时才让聚合物将它添加到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的新脚本标记。

Javascript async和polymer

1 个答案: