Polymer Javascript异步和聚合

Polymer Javascript异步和聚合,polymer,polymer-1.0,Polymer,Polymer 1.0,我正在尝试为新的JSFIDLE嵌入创建一个元素,它需要我动态地更改用户名和FIDLE id(因此我创建了一些属性) 但是脚本搜索//jsfiddle.net///embed/我猜这意味着脚本标记在绑定属性之前被触发。这是我的密码 <link rel="import" href="https://polygit.org/components/polymer/polymer.html"> <dom-module name="jsfiddle-demo"> <temp

我正在尝试为新的JSFIDLE嵌入创建一个元素,它需要我动态地更改用户名和FIDLE 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>

聚合物({
是:“JSFIDLE demo”,
特性:{
用户名:{
类型:字符串,
值:“”
},
小提琴:{
类型:字符串,
值:“”
},
}
});

与活动的

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

将脚本标记包装在if模板中,以便仅当username和fiddle都存在时,才能将其添加到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>

聚合物({
是:“JSFIDLE demo”,
特性:{
用户名:{
类型:字符串,
值:“”
},
小提琴:{
类型:字符串,
值:“”
},
},
usernameanddlepresent:函数(用户名,fiddle){
返回(用户名和小提琴);
}
});
restamp
属性是关键。它告诉polymer将模板中的元素实际移除或添加到DOM中,而不是仅仅显示/隐藏它们。
每次更改fiddle属性的任一用户名时,都会计算表达式


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

我删除了字符串的默认值,并将其设置为url位于中的计算绑定中(这样,只有在同时定义了username和fiddle时才设置script src属性),但似乎还存在一些其他问题,现在出现了一个新错误,但是你解决了这个问题。谢谢:-)