Question

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

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

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

我提出了一些想法：

a）创建一个包含铁页的第三个组件并将事件连接起来

<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
  }

对我来说似乎是一个很大的开销，这真的有必要吗？

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

但我找不到在<my-page>

中检测属性更改的方法

是否有常见的模式可以解决这个问题？

Answer 1

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

<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]');
  }
}

（对不起，僵尸线程，但是来找这个）。

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

2 个答案: