スクリプトタグが

Question

を実行していない私は、単純なアウレリアビューに簡単なスクリプトブロックを追加している：

<template> 
    <script type="text/javascript"> 
    alert('Hello!'); 
    </script> 
</template> 

スクリプトはビューが正しくレンダリングされていても、実行ことはありませんし、私はそれを見ることができますスクリプトブロックはDOMに表示されます。

私はまた、動的ViewModelに介して、スクリプトブロックを挿入してもしてみました試してみました：

<script type="text/javascript" src="http://blah"></script> 

私はそれがこれを行うためのベストプラクティスではありません理解し、私はそのサードパーティのウィジェットを統合しようとしていますiframeをレンダリングします。上記のアラートは、私が見ている問題を確認するための単純な方法です。私は私のビューモデルから第三者へのAPI呼び出しを行う

• ：次のように

  現実のシナリオがあります。

• 以下が返されます。

  <script type='text/javascript' language='JavaScript' SRC =」https://secure.na1.echosign.com/public/embeddedWidgetを？ `WID = CBFCIBAA3AAABLblqZhBU33GaMRZ2lMelHKzti7RkanxMP5v- uW_f8CEiKoopNNofJWyXhmE56Su3HTbY * &トークン= CBNCKBAAHBCAABAARNiZ7Yba0h7dnLaQRBAdTdH9UrJZKryP」/>

私はDOMにこれを追加し、それを実行する必要があります。私はフェッチを介して上記のURLを呼び出すことでこの問題を回避しようとしているし、私は応答を執行しますが、それはそれを行うの退屈な/ハッキーのように思えます。

Answer 1

私は、この回答で提供されているソリューションを適合させることをお勧めします：Use JS variable to set the src attribute for <script> tag。 （ほとんどの場合）あなたのVMのbindまたはattached方法で

：

let scriptURL = api.getURL(); 

let scriptElement = document.createElement('script'); 

scriptElement.src = scriptURL; 
scriptElement.onload =() => { 
    // do anything you need to do here, or call a VM method 
    this.someVMMethod(); 
}; 

this.scriptElementInHead = document.querySelector('head').appendChild(scriptElement); 

必要であれば、あなたもそれへの参照を維持したとき、コンポーネントhead要素からそれを除去することにより、script要素を削除することができますunbindまたはdetachedメソッドでアンロードされています。

detached() { 
    document.querySelector('head').removeChild(this.scriptElementInHead); 
}