Связывание данных Polymer 1.0 со встроенными тегами сценария

Возможно ли иметь привязку данных внутри тега встроенного скрипта? Например:

<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, я мог ничего лучше не придумаешь.

Я отредактировал этот пост для 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 для присвоения data-amount в теге скрипта Stripe?

См. Plunkr


javascript polymer polymer-1.0
person Sylar    schedule 12.07.2015    source источник
comment
Пробовали ли вы упомянутый здесь синтаксис $=: polymer -project.org/1.0/docs/devguide/ Это работает для class, но не уверен насчет тега script. Кроме того, вы должны использовать this.url= и this.klass=.   -  person anthony    schedule 13.07.2015

Ответы (1)


arrow_upward
0
arrow_downward

Я сделал 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 не создает для вас новый тег script. Вы можете создать тег script с помощью DOM.

Отредактировано:

Инициализация атрибутов тега script без "готового" метода.

<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, вы увидите URL-адрес в DOM.

person Mason    schedule 13.07.2015
comment
Я частично получил это, чтобы работать с любым советом: $=. У меня есть функция, которая присваивает this.url, как передать ее тегу скрипта без использования готовой функции? - person Sylar; 13.07.2015
comment
Я вижу 2 способа сделать это. Используйте частные свойства или общедоступные атрибуты. Я обновил свой пост выше. - person Mason; 13.07.2015
comment
@Manson Пост еще не обновлен. Вы сделали это? - person Sylar; 13.07.2015
comment
Хорошо, это сработало, как описано, но дело в том, что я не использую импорт <my-app></my-app>, я хочу использовать функцию в том же html, возможно ли это? - person Sylar; 13.07.2015
comment
@Sylar На самом деле да. Я не должен был сказать в родителя. Вы можете разместить тег my-element где угодно (даже в файле, где он описан), просто импортируйте элемент, если это необходимо. - person Mason; 13.07.2015
comment
Не уверен, что я следую. Смотрите мой отредактированный вопрос, где у меня есть функция selectionChanged. Мне нужно, чтобы значение this.total передавалось data-amount. Я не могу использовать <my-element amount="({{total}}"></my-element> - person Sylar; 13.07.2015
comment
Не могли бы вы сделать Plunkr? Я поработаю над этим, когда у меня будет больше времени. А пока мне нужно вернуться к работе :). (Убедитесь, что вы объявили сумму общедоступной собственностью. properties: {amount: {type: Number}}) - person Mason; 13.07.2015
comment
Я сделаю это, когда доберусь до работы. Я не объявлял amount. Я попробую это сначала позже. Спасибо за постоянную поддержку. - person Sylar; 13.07.2015
comment
Я добавил Plunkr. Смотри пост выше. - person Sylar; 13.07.2015
comment
Я обновил ваш Plunkr, но не знаю, хотите ли вы просто инициализировать сумму или нет, поэтому я написал несколько комментариев. - person Mason; 13.07.2015
comment
Спасибо. Я посмотрю, как только доберусь до дома, так как я на мобильном. - person Sylar; 13.07.2015
comment
То же самое, ничего не меняется. Я сяду и разберусь с этим. Цель состоит в том, чтобы захватить значение this.total и передать его в {{total}}. this.total имеет разные значения в зависимости от раздела пользователя (true или false). - person Sylar; 14.07.2015