使用 Web UI 时,我可以将数据传递给组件,如下所示:
<my-element" name="{{someName}}"></my-element>
如何将数据传递给聚合物元素?
您可以将数据传递给 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>
Each <template>
绑定到一个单独的值(我们稍后会讨论)。创建元素时,您可以使用以下方式获取该值{{}}
句法。
数据可以通过以下方式绑定到模板:
// In index.dart.
void main() {
query('#name1').model ='Bob';
query('#name2').model ='Rohan';
}
这样一来,第一个<my-element>
创建的名称为“Bob”,第二个<my-element>
创建的名称为“Rohan”。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)