javascript - 向 Polymer 元素提供数据

Question

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

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

<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

要使用数据绑定(bind)，您需要在 polymer 元素内或在 dom-bind 元素内使用它。看解释here .如果您使用 dom-bind，这只是使用 js 将 DATA 设置为 dom-bind 模板元素上的属性的情况，可能是“数据”，这将是很少的代码。

本质上，您不能设置全局变量并期望数据绑定(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 全局。