Предоставяне на данни на полимерни елементи

Искам един единствен източник да предоставя всички мои данни. Модел, ако желаете, и искам моите елементи да могат да използват тези данни, но никога да не ги променят (еднопосочно обвързване на данни). Как мога да направя това? Трябва ли да добавя данните като поведение?

Опитах се да направя това в моя документ:

<script type="text/javascript" src="/data.js"></script> <!-- defines a global object named DATA -->
<my-element data="{{DATA}}"></my-element>

И това вътре в my-element.html

<dom-module id="my-element">
  <template></template>
  <script>
    Polymer({
      is: 'my-element',
      properties: {
        data: Object
      },
      ready: function () {
        console.log(this.data);
      }
    });
  </script>
</my-element>

но изглежда не работи, стойността на this.data е буквално "{{data}}".

Търся по-добро решение от опаковането на декларацията на елемент в шаблон dom-bind


javascript html data-binding web-component polymer
person Luke    schedule 12.09.2015    source източник

Отговори (2)


arrow_upward
2
arrow_downward

За да използвате обвързване на данни, трябва или да го използвате вътре в полимерен елемент, или вътре в dom-bind елемент. Вижте обяснението тук. Ако използвате dom-bind, това е само случай на използване на js за задаване на DATA на свойство на елемента на шаблона dom-bind, може би „data“, което би било малък код.

По същество не можете да зададете глобално и да очаквате обвързването на данни да знае за това. Трябва или да кажете на dom-bind за него, или на елемента за него, като зададете свойство на елемента, може би използвайки поведение, както предложихте, или използвайки подхода на Mowzer.

Пример за използване на поведение би бил:

<link rel="import" href="/bgdatabehaviour.html"> 
<link rel="import" href="/bgbower_components/polymer/polymer.html">

<dom-module id="an-ele">

    <style>
    </style>
    <template>
        <div>{{data.sth}}</div>
    </template>
    <script>
        Polymer({
            is: "an-ele",
            behaviors: [DataBehaviour]
        });
    </script>

</dom-module>

Като поведението е:

<script>
    DataBehaviour = {
        ready: function() {
            this.data = {'sth':'A thing! A glorious thing!'};
        }
    }
</script>

Но във вашия случай this.data ще бъде зададено на вашето DATA глобално.

person mmm111mmm    schedule 12.09.2015
comment
Аз разбирам, че. Извикването на функцията Polymer, което правя, е вътре в тага на скрипта на елемент Polymer. - person Luke; 12.09.2015
comment
Работата е там, че <my-element data="{{DATA}}"></my-element> е извън полимерен елемент или dom bind, така че не знае какво е DATA или data binding, по този въпрос. - person mmm111mmm; 12.09.2015
comment
Най-добрият ви залог е да зададете DATA global на свойство на елемент, като пренебрегнете изцяло обвързването на данни извън елементите, като използвате най-вероятно поведение. - person mmm111mmm; 12.09.2015
comment
Можете ли да дадете пример как мога да направя това с поведение? - person Luke; 12.09.2015

arrow_upward
2
arrow_downward

Използвайте <iron-meta> [връзка] или <iron-localstorage>] [връзка] за споделяне на променливи между елементи или основния документ.

person Let Me Tink About It    schedule 12.09.2015