<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>
ですか? dom-repeatポリマー管理テンプレートの使用方法については、https://www.polymer-project.org/2.0/docs/devguide/templates#dom-repeatを参照してください。たとえばhttps://codepen.io/johnthad/pen/zEzVLmを参照してください。 – Thad
'my-data'の配列やオブジェクトのデータを変更する場合は、親要素に通知する必要があります。これは、 'this.set( 'data'、dataValue)'のように、Polymerの 'this.set(...)'を使って扱うことができます。おかげで、my-data要素がレンダリングされる可能性がありますが、他の要素はまだmy-data要素から情報を取得できません。https://www.polymer-project.org/2.0/docs/devguide/model-data#set-path –