dart - Polymer要素にデータを渡す

Question

Web UI を使用する場合、次のようにデータをコンポーネントに渡すことができます。

<my-element" name="{{someName}}"></my-element>

データを Polymer 要素に渡すにはどうすればよいですか?

Answer 1

データを Polymer 要素に渡すことができますが、もう少し詳細が必要です。単一のフィールドを持つ要素を想像してくださいname:

// In element.dart.
import 'package:polymer/polymer.dart';

@CustomTag("my-element")
class MyElement extends PolymerElement with ObservableMixin {
   @observable String name;
}

付属の html は次のとおりです。

// In element.html.
<polymer-element name='my-element' attributes="name">
  <template>
    <h2>{{name}}</h2>
  </template>
  <script type="application/dart" src="element.dart"></script>
</polymer-element>

部分に注意してくださいattributes="name"。これにより、要素の作成時に要素に name 属性を渡すことができるように構成されます (要素が必要な場合は、複数の属性をコンマで区切って渡すことができます)。

要素を作成するときは、渡す値にバインドされたタグでラップし<template>ます。

// In index.html.
<template id='name1' bind>
  <my-element name="{{}}"></my-element>
</template>

<template id='name2' bind>
  <my-element name="{{}}"></my-element>
</template>

それぞれ<template>が個別の値にバインドされます (すぐに説明します)。{{}}要素を作成するときに、構文を使用してその値を取得できます。

データは、次の方法でテンプレートにバインドできます。

// In index.dart.
void main() {
  query('#name1').model ='Bob';
  query('#name2').model ='Rohan';
}

このようにして、最初<my-element>の名前が「Bob」で<my-element>作成され、2 番目の名前が「Rohan」で作成されます。