Передача данных на полимерный элемент

Question

При работе с Web-интерфейсом, я мог бы передавать данные к компоненту, как это:

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

Как передать данные в полимерный элемент?

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" часть. Это настраивает вещи так, чтобы элементу можно было передать атрибут имени при его создании (вы можете передать несколько атрибутов, разделив их запятой, если ваш элемент нуждается в ней).

При создании элемента, завернуть его в <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> создается с именем «Рохана ».