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>

如何在Stripe的脚本标记中将this.total的值分配给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>

第一次加载有效，但是当绑定值发生更改时，Polymer不会为您创建新的脚本标记。您可以使用DOM创建脚本标记。

编辑：

初始化脚本标记的属性，不用＆＃34; ready＆＃34;方法

<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中的网址。

Polymer 1.0数据绑定使用内联脚本标记

1 个答案: