向 Polymer 元素提供数据

Question

我想让一个来源提供我的所有数据。一个模型，如果你愿意的话，我希望我的元素能够利用这些数据，但永远不要改变它（一种数据绑定方式）。我该怎么做？我应该将数据添加为行为吗？

我尝试在我的文档中这样做：

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

这在我的里面-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 模板中更好的解决方案

Answer 1

要使用数据绑定，您需要在聚合物元素内或在 dom-bind 元素内使用它。见解释here。如果你使用 dom-bind，这只是使用 js 在 dom-bind 模板元素上将 DATA 设置为属性的情况，'data' 可能会代码少

本质上，您不能设置全局变量并期望数据绑定了解它。您需要通过在元素上设置属性来告诉 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 全局。

Answer 2

使用 <iron-meta> [link] or <iron-localstorage>] [link] 在元素或主文档之间共享变量。

向 Polymer 元素提供数据

Providing data to Polymer elements

html

javascript

data-binding

web-component

polymer