Question

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

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

在我的<my-app>中，我创建了一个属性headerType并使用<dom-if>来显示/隐藏不同的<app-toolbar>。

我的问题是，如果<my-app>处于活动状态（即进入查看状态），我将如何始终向headerType = my-view#-header发送事件并设置<my-view#>。

我已尝试过聚合物生命周期，例如ready()，attached()等，我知道它们只会在与dom相关的事件中触发。

Answer 1

我最终使用_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);
},

Answer 2

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

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

如果`<my-view＃>`处于活动状态（即进入视图），如何触发事件？

2 个答案: