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> 中绑定(bind)到您要传递给它的值的标签:

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

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

每个 <template>被绑定(bind)到一个单独的值(我们稍后会谈到)。创建元素时，您可以使用 {{}} 获取该值句法。

数据可以通过以下方式绑定(bind)到模板:

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

这样，第一个 <my-element>以名称“Bob”创建，第二个 <my-element>以名称“Rohan”创​​建。