向 Polymer 元素提供数据

Question

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

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

<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 模板中更好的解决方案

Answer 1

要使用数据绑定，您要么需要在聚合物元素内使用它，要么在 dom-bind 元素内使用它。见解释here。如果你使用dom-bind，只是使用js将DATA设置为dom-bind模板元素上的属性，可能是'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] 或<iron-localstorage>] [link] 在元素或主文档之间共享变量。