将数据传递给Polymer元素 [英] Passing data to a Polymer element

问题描述

当使用Web UI时，我可以传递数据到这样的组件：

 < my-elementname = {{someName}}>< / my-element> 
  

到Polymer元素？

解决方案

您可以将数据传递给Polymer元素，具有单个字段的元素 name ：

 class MyElement extends PolymerElement with ObservableMixin {
 @observable String name; 
} 
  

$ b b

这里是随附的html：

  //在element.html中。 b $ b< polymer-element name ='my-element'attributes =name> 
< template> 
< h2> {{name}}< / h2> 
< / template> 
< script type =application / dartsrc =element.dart>< / script> 
< / polymer-element> 
  

注意 attributes =name 。它配置的东西，使得元素可以在创建时传递name属性（如果你的元素需要它，你可以通过用逗号分隔多个属性）。

创建元素时，将其包装在与您要传递给它的值绑定的< template> 标记中：

  //在index.html中。 
< template id ='name1'bind> 
< my-element name ={{}}>< / my-element> 
< / template> 
 
< template id ='name2'bind> 
< my-element name ={{}}>< / my-element> 
< / template> 
  

每个< template> 一个单独的值（我们将在一秒内得到）。创建元素时，可以使用 {{}} 语法获取该值。

数据可以通过以下方式绑定到模板：

  //在index.dart中。 
 void main（）{
 query（'＃name1'）。model ='Bob'; 
 query（'＃name2'）。model ='Rohan'; 
} 
  

这样，第一个< my-element> ;创建名为Bob的，并使用名称Rohan创​​建第二个< my-element> p>

When working with Web UI I could pass data to a component like this:

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

How do I pass data to a Polymer element?

解决方案

You can pass data to a Polymer element, but there is a little bit more detail involved. Imagine the element with a single field, name:

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

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

And here is the accompanying 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>

Note the attributes="name" part. That configures things so that the element can be passed the name attribute when it is created (you can pass in multiple attributes by separating them with a comma if your element needs it).

When creating the element, wrap it in a <template> tag that is bound to the values you want to pass to it:

// 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> gets bound to a separate value (we'll get to that in a second). When creating the element, you can get that value using {{}} syntax.

The data can be bound to the template in the following manner:

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

This way, the first <my-element> is created with the name 'Bob', and the second <my-element> is created with the name 'Rohan'.

这篇关于将数据传递给Polymer元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！