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

Question

我有一个包含两个自定义元素的Polymer1.0铁页元素：

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

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

我想出了一些想法：

1. 创建包含铁页的第三个组件并连接事件。 ..。聚合物({.)onPageChanged:function(){ var page =.；page.selected = true；} 和 ..。onSelected:function(){ // fetch data } 对我来说，这真的有必要吗？
2. 使用<iron-pages selectedAttribute="..." ...> 但是我找不到一种方法来检测<my-page>中的属性变化。

有共同的模式来解决这个问题吗？

Answer 1

我的解决方案类似于您的选项A，但是使用事件而不是方法调用--这是一种更正确的方法，实际上我对为什么聚合物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也应该有效--您可能需要设置正确的属性和派个观察员来。在包含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]');
  }
}

(对僵尸线程表示抱歉，但来找这个)。