如何访问聚合物元素实例的属性或方法

时间:2014-01-08 21:34:39

标签: dart dart-polymer

我已经定义了一种新的聚合物元素。

<polymer-element name="m-test">
  <template>
  ...
  </template>
  <script type="application/dart" src="m-test.dart"></script>
</polymer-element>
@CustomTag('m-test')
class Mtest extends PolymerElement {
  @observable int myAttr = 0;
  ...  
void myMethod()

如何在主dart程序中访问属性myAttr或调用方法myMethod以获取此元素的实例。

<m-test id="mt1"></m-test>
<m-test id="mt2"></m-test>

1 个答案:

答案 0 :(得分:4)

您可以在标记中访问您的属性

<m-test id="mt1" my-attr="5"></m-test>

或代码

querySelector('#mt1').myAttr = 5; // produces a warning in the editor
querySelector('#mt1').myMethod(5); // - " -
(querySelector('#mt1') as Mtest).myAttr = 5; // may fail at runtime due to bug https://code.google.com/p/dart/issues/detail?id=15953
(querySelector('#mt1') as Mtest).myMethod(5); // - " -

您还可以声明性地访问事件处理程序

void clickHandler(event, detail, target) {
  // handle event
}
<polymer-element name="m-test">
  <template>
    <button on-click="{{clickHandler}}">{{myAttr}}</button> // caption from myAttr
  </template>
  <script type="application/dart" src="m-test.dart"></script>
</polymer-element>