如何隐藏自定义聚合物元素？

Question

对于实验，我使用来自 https://www.dartlang.org/docs/tutorials/polymer-intro/

的自定义元素 tute-stopwatch

当我为按钮设置属性'.hidden = true'时，这些按钮隐藏成功，但元素tute-stopwatch没有。

  void addChild(Event e, var detail, Node target) {
    ..
    stopButton.hidden = true;
    startButton.hidden = true;
    resetButton.hidden = true;

    this.hidden = true; 
}

当我在 tute_stop_watch.html 中使用子模板时：

<template if="{{ visible }}" id="innerTemplate">

在 tute_stop_watch.dart 中：

  void enteredView() {
    super.enteredView();
    startButton = $['startButton']; // $['startButton'] == null
    innerTemplate =$['innerTemplate'] // find correct, but innerTemplate.childNodes == []

我尝试让元素具有所有功能 tute-stopwatch 按需可见。

Answer 1

将以下样式添加到您的聚合物元素中：

<polymer-element name="tute-stopwatch">
  <template>
    <style>
      /* old style for current Dartium */
      @host {
        * {
          display: inline-block;
          position: relative;
          overflow: hidden;
        }

        [hidden], .hidden {
          display: none;
        }
      }

      /* new style for Chromium */
      :host {
        display: inline-block;
        position: relative;
        overflow: hidden;
      }

      :host([hidden]:host, .hidden:host) {
        display: none;
      }
    </style>

    <button>xxx</button>
    ...

  <template>
  <script type="application/dart" src='toute-stopwatch.dart'></script>
</polymer-element>

您可以通过设置hidden 属性或添加/删除类hidden 使元素可见/隐藏。

Answer 2

您可以隐藏整个模板：

<template>
    <template if="{{ visible }}">
     CONTENT
    </template>
</template>

visible 是一个 @published 布尔值。

然后你可能在 dart 中有一个方法，例如：

void hide() {
    visible = false;
}

您可以通过 HTML 中的点击链接调用它。