Polymer Javascript异步和聚合
我正在尝试为新的JSFIDLE嵌入创建一个元素,它需要我动态地更改用户名和FIDLE id(因此我创建了一些属性) 但是脚本搜索//jsfiddle.net///embed/我猜这意味着脚本标记在绑定属性之前被触发。这是我的密码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
<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属性),但似乎还存在一些其他问题,现在出现了一个新错误,但是你解决了这个问题。谢谢:-)