聚合物1.0數據綁定與行內腳本標記

Question

這是可能有數據綁定內嵌腳本標記？例如：

<script src="{{url}}" class="{{klass}}"></script> 

Polymer({ 
is: "test-app", 
ready: function() { 
    url = "http://google.com/js/some-file.js", 
    klass = "script-class" 
} 
}); 

根據Polymer 1.0 Data Binding docs，我不能拿出更好的東西。

我編輯了這篇文章，以達到我想達到的100％的清晰度。我想用Strip Embedded Checkout：

<form action="" method="POST"> 
    <script 
    src="https://checkout.stripe.com/checkout.js" class="stripe-button" 
    data-key="pk_test_blahblah" 
    data-amount="2000" 
    data-name="Demo Site" 
    data-description="2 widgets ($20.00)" 
    data-image="/128x128.png"> 
    </script> 
</form> 

梅森的回答和安東尼的線索使我這個：

<dom-module id="my-app> 
<template> 
    <form action="" method="POST"> 
     <script 
      src$="{{url}}" class$="{{klass}}" 
      data-key$="{{key}}" 
      data-amount$="{{total}}" 
      data-name$="{{dname}}" 
      data-description="2 widgets ($20.00)" 
      data-image="/128x128.png"> 
     </script> 
     </form> 
</template> 
<script> 
    Polymer({ 
     is: "my-app", 
     properties: { 
      selection: { 
      type: String, 
      observation: "selectionChanged" 
      } 
     }, 
    ready: function() { 
      this.url = 'https://checkout.stripe.com/checkout.js'; 
      this.klass = 'stripe-button'; 
      this.key = 'pk_test_blahblah'; 
      this.dname = 'Demo'; 
      // this.total = "333"; // this value is not static 
     }, 
    selectionChanged: function() { 
     if (true) { 
     this.total = 50; // I need this to assign to "{{total}}" in the template. 
     } 
    }; 
</script> 
</dom-module> 

我怎樣才能得到的this.total價值在script標籤被分配到data-amount條紋的？

See Plunkr

Answer 1

我做了Plunk，似乎這是不可能做到這一點。

<dom-module id="my-element"> 
    <template> 
    <script src="{{url}}"></script> 
    Try to load <span>{{name}}</span> 
    </template> 
    <script> 
    Polymer({ 
    is: 'my-element', 
    ready: function() { 
     this.name = 'JQuery'; 
     this.url = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'; 

     this.async(function() { 
     this.name = 'AngularJs'; 
     this.url = 'https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js'; 
     }, 5000); 
    } 
    }); 
    </script> 
</dom-module> 

第一裝載的作品，但是當綁定值發生了變化，聚合物不會爲您創建一個新的腳本標籤。您可以使用DOM創建腳本標記。

編輯：

初始化腳本標籤的屬性沒有 「準備好」 的方法。

<template> 
    <script src="{{_url}}"></script> 
</template> 
<script> 
Polymer({ 
    is: 'my-element', 
    properties: { 
    _url: { 
     type: String, 
     value: 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' 
    } 
    } 
}) 
</script> 

或使用託管屬性

<template> 
    <script src="{{url}}"></script> 
    Try to load <span>{{name}}</span> 
</template> 
<script> 
Polymer({ 
    is: 'my-element', 
    hostAttributes: { 
    url: { 
     type: String 
    } 
    } 
}) 
</script> 

，並在父元素：

<my-element url="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></my-element> 

通過使用hostAttributes你會看到在DOM的URL。