如何在 `<my-view#>` 处于活动状态（即进入视野）时触发事件？

Question

以 Polymer Starter Kit 为例，我想在 <my-app> 中有不同的 <app-toolbar>（使用属性 headerType）基于不同的 <my-view#>，即

<my-view1> => headerType = 'my-view1-header'
<my-view2> => headerType = 'my-view2-header'

在我的 <my-app> 中，我创建了一个属性 headerType 并使用 <dom-if> 到 show/hide 不同的 <app-toolbar>.

我的问题是，当 <my-view#> 处于活动状态（即进入视野）时，我如何始终向 <my-app> 触发事件并设置 headerType = my-view#-header。

我已经尝试过 polymer 生命周期，例如 ready()、attached() 等，我知道它们只会在 dom 相关事件期间触发。

Answer 1

Polymer shop 模板中有一些示例，您可以在视图的可见性随 iron-pages 发生变化时执行某些操作。

你只需要添加一个属性例如在你的每个布尔类型的视图元素中可见并观察属性来检查视图是否可见，然后在你的iron-pages 你需要添加 selected-attribute 属性并且该值是可见的。检查 Polymer Shop Template.

Answer 2

我最终使用 _pageChanged 观察器调用 <my-view#> 上的函数。以下是代码片段。

_pageChanged: function(page) {
  let onLoad = function () {
    let selected = this.$.ironpages.children[page];

    if (Object.getPrototypeOf(selected).hasOwnProperty('viewSelected')) {
      selected.viewSelected();
    }
  }

  // Load page import on demand. Show 404 page if fails
  var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
  this.importHref(resolvedPageUrl, onLoad, this._showPage404, true);
},

如何在 `<my-view#>` 处于活动状态（即进入视野）时触发事件？

How to fire an event whenever `<my-view#>` is active (i.e. comes into view)?

polymer

polymer-1.0

polymer-starter-kit