铁页中的组件如何知道何时被选中

Question

我有一个包含两个自定义元素的 Polymer 1.0 iron-pages 元素：

<iron-pages selected="...">
  <my-page>A</my-page>
  <my-page>B</my-page>
</iron-pages>

当页面被选中时，我想在我的页面组件中执行一些操作，例如获取 ajax 内容。我该怎么做？

我想到了一些想法：

创建包含 iron-pages 和连接事件的第三个组件

<dom-module id="my-controller">
  <template>
    <iron-pages selected="..." on-selected-changed="onPageChanged">
  ...
  <script>Polymer({...
    ...
    onPageChanged:function(){
      var page = ...;
      page.selected = true;
    }

和

<dom-module id="my-page">
  ...
  onSelected:function(){
    // fetch data
  }

对我来说似乎是相当多的开销，这真的有必要吗？

使用<iron-pages selectedAttribute="..." ...>

但我找不到检测 <my-page>

是否有解决此问题的通用模式？

Answer 1

我的解决方案与您的选项 A 类似，但使用事件而不是方法调用 - 这是一种更正确的方法，我实际上很困惑为什么 Polymer's ironSelectableBehavior 没有直接实现它：

<iron-pages id="pages" ...>
   <my-first-page></my-first-page>
   <my-second-page></my-second-page>
</iron-pages>

...

<script>
Polymer({
    is: 'my-app',
    listeners: {
        'pages.iron-select': 'pageSelected',
        'pages.iron-deselect': 'pageDeselected'
    },
    pageSelected: function(e) { e.detail.item.fire('iron-select'); },
    pageDeselected: function(e) { e.detail.item.fire('iron-deselect'); })
});
</script>

然后，在您的元素中，监听这些事件：

Polymer({
    is: 'my-custom-element',
    listeners: {
        'iron-select': '_refreshData'
    },
    _refreshData: function(e) {
        // load some data
    }
});

选项 B 也应该有效 - 您可能需要设置正确的属性和 put an observer on it。在包含 iron-pages 的组件中，使用带连字符的形式设置属性：

<iron-pages selected-attribute="activated" ...>
   <my-first-page></my-first-page>
   <my-second-page></my-second-page>
</iron-pages>

然后在您的自定义组件中设置属性和观察者：

Polymer({
    is: 'my-first-page',
    properties: {
        activated: {
            type: Boolean,
            observer: '_activationChanged'
        }
    },
    _activationChanged: function(newval, oldval) {
        if (newval) // == true
            console.log("just activated");
    }
});

Answer 2

<iron-pages selected-attribute="visible"></iron-pages>

class MyClass extends PolymerElement {
  get activePage() {
    return this.shadowRoot.querySelector('iron-pages > *[visible]');
  }
}

（对僵尸线程感到抱歉，但我是来找这个的）。

铁页中的组件如何知道何时被选中

How can component in iron-pages know when it is selected

idioms

dom-events

polymer-1.0