JavaScript非同期とポリマー

Question

私は新しいjsfiddle埋め込みの要素を作ろうとしています。ユーザー名とフィドルIDをその場で変更する必要があります（私はいくつかのプロパティを作成しました）。

しかし、スクリプトは//jsfiddle.net///embed/を検索します。これは、プロパティがバインドされる前にスクリプトタグがトリガーされていることを意味します。ここに私のコードです。スクリプトタグをDOMに追加されたときにアクティブJSFiddle

Answer 1

ユーザ名とフィドル特性

<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> 

等は、実際には時点で空です。それらを更新した後でさえ、スクリプトは再ロードされません。

スクリプトタグを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に追加するように指示します。
fiddleプロパティのユーザー名が変更されるたびに式が評価されます。

理論上、ユーザー名やフィドルを変更したい場合は、プロパティの1つを設定解除して別のものにリセットするだけです。これにより、別のsrcを持つ新しいスクリプトタグが得られるはずです。