Предоставление данных полимерным элементам

Я хочу, чтобы один источник предоставлял все мои данные. Модель, если хотите, и я хочу, чтобы мои элементы могли использовать эти данные, но никогда не меняли их (односторонняя привязка данных). Как я могу это сделать? Должен ли я добавить данные как поведение?

Я попытался сделать это в своем документе:

<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, возможно, «данные», что было бы небольшим кодом.

По сути, вы не можете установить глобальную переменную и ожидать, что привязка данных будет знать об этом. Вам нужно либо сообщить об этом dom-bind, либо об этом элементе, установив свойство для элемента, возможно, используя поведение, как вы предложили, или используя подход Mowzer.

Примером использования поведения может быть:

<link rel="import" href="databehaviour.html"> 
<link rel="import" href="bower_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, который я делаю, находится внутри тега script элемента Polymer. - person Luke; 12.09.2015
comment
Дело в том, что <my-element data="{{DATA}}"></my-element> находится вне полимерного элемента или привязки dom, поэтому он не знает, что такое DATA или привязка данных, если уж на то пошло. - 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