Question

Polymer元素定义如下：

<polymer-element name="my-element">
    <template>
       <template if="{{show==true}}">
           <div on-click="{{hideMe}}"> click to hide my div </div>
           <div id="mydiv">
               my div content here
           </div>
       </template>
     </template>
 </polymer-element>

Dart代码如下：

@CustomTag('my-element')
@observable bool show = true;

 hideMe(){
    Element e = $['mydiv'];
    e.hidden = true;
 }

代码不起作用，因为$ ['mydiv']返回null。如何在Dart聚合物组件中的嵌套模板中找到元素？

Answer 1

你为什么要那样做？ <template if时，show == false会从DOM中删除节点。你所要做的就是

在HTML中

`on-click='{{hide}}'`

在Dart

void hide() {
  show = false;
}

如果您不想隐藏<div on-click='...>，请将其移至<template if=...>

之外

提示：如果您的show字段属于bool类型，则可以简化为

 <template if="{{show}}">

Answer 2

是的，$['id']似乎无法使用嵌套模板。但也有更冗长的方式，这是有效的。

Element e = this.shadowRoot.querySelector("#mydiv");

如何在嵌套模板中查找元素

2 个答案: