Polymer自定义数据组件无法发送数据的原因

时间:2017-09-29 03:41:11

标签: data-binding polymer-2.x custom-element

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
    <dom-module id="my-data">
      <script>
      ( function () {
        let dataValue = [
          {num: 'T001', status: '4', bground: 'num-sub'},
          {num: 'T002', status: '4', bground: 'num-sub'},
          {num: 'T003', status: '4', bground: 'num-sub'},
        ];
    class MyData extends Polymer.Element {
      static get is() { return 'my-data'; }
      static get properties() { return {
        data: {
          type: Array,
          value: dataValue,
          readOnly: true,
          notify: true
        }
      }}
    }
    window.customElements.define(MyData.is, MyData);
      })();
      </script>
    </dom-module>

我像上面一样创建了一个自定义元素my-data.html。 然后以下是my-app.html中的用法。 我的数据可能会被呈现,但my-app.html似乎无法获得带有data: Array属性的my-data信息。

 <my-data data="{{data}}"></my-data>
    <dom-repeat items="{{data}}" as="entry">
      <template>
        <my-num entry="[[entry]]" ></my-num>
      </template>
    </dom-repeat>
</template>
  <script>
    class MyApp extends Polymer.Element {
      static get is() { return 'my-app'; }
      static get properties() {
        return {
          data: {
            type: Array,
          }
        }
      }
    }
    window.customElements.define(MyApp.is, MyApp);
  </script>

1 个答案:

答案 0 :(得分:0)

您需要先my-data.html导入my-num.htmlmy-app.html

示例:

<link rel="import" href="my-data.html">
<link rel="import" href="my-num.html">

此外,id的{​​{1}}中的dom-module名称应为my-num.html而不是my-name

导入kvs-num以及dom-repeat

my-app.html

Demo here