Polymer 是否有组件的 'componentAppeared' 事件？

Question

我想在显示组件时将焦点设置在标签上，我想知道 Polymer 是否内置了一些东西，如果没有，我想知道其他人是怎么做到的。谢谢

Answer 1

您需要使用 attached callback，一旦您的组件加载并附加到 dom，它就会被调用。

这是您需要执行的一些示例代码 (and here a jsbin with it working)：

<dom-module id="x-test">
  <template>
    <a id="tofocus" href="/">I'm going to get focused</a>
    <a>but I'm not</a>
  </template>
  <script>
    Polymer({
      is: 'x-test',
      attached: function () {
        this.$.tofocus.focus();
      }
    });
  </script>
</dom-module>

Answer 2

Polymer 中没有componentAppeared 的概念。可以说，DOM 中标记的每个元素都是 "appeared"。

您似乎想通过 <neon-animated-pages> 组件显示 "pages"。包裹在 <neon-animated-pages> 内的每个页面都已标记为 DOM - 每个页面的可见性由控制器元素 CSS display:block/display:none 处理

如果您想在页面显示时做一些事情，您必须手动连接。

<neon-animated-pages selected="{{selected}}" on-neon-animation-finish="_focus">

  <neon-animatable class="red" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
    <h1>Page 1</h1>
    <a id="label0" href="#">Focus me</a>
  </neon-animatable>

  <neon-animatable class="green" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
    <h1>Page 2</h1>
    <a id="label1" href="#">Focus me</a>
  </neon-animatable>

</neon-animated-pages>

...

  _focus: function () {
    this.$['label'+this.selected].focus();
  }

Jsbin: http://jsbin.com/celesobiba/edit?html,console,output

Polymer 是否有组件的 'componentAppeared' 事件？

Does Polymer have a 'componentAppeared' event for components?

events

components

polymer

polymer-1.0