Polymer 如何检测页面节何时显示？

我正在构建一个Polymer（SPA）应用程序，并已将我的每个

iron页面

部分创建为

。因为它们都共享相同的

纸质工具栏

，我想在某个页面上添加一些工具栏按钮，但不想让它们出现在其他页面上

在Polymer中有

就绪

、

创建

、

附加

和

分离

功能，这些功能在应用程序加载时都会触发。是否存在“页面将出现”或“页面将消失”事件，以便我可以添加该页面特有的工具栏按钮，然后在页面更改后再次删除它们？以下是我到目前为止得到的：

Index.html代码段

<main class="content">
  <iron-pages attr-for-selected="data-route" selected="login" >
    <!-- login page -->
    <section data-route="login">
      <page-login></page-login>
    </section>
    <!-- home page -->
    <section data-route="home">
      <page-home></page-home>
    </section>
  </iron-pages>
</main>

page-home.html页面

<link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id="page-home">
<template>
<h1>Home</h1>
</template>
<script>
Polymer({
  is: "page-home",
  ready : function() {
    console.log(this.localName + ' ready');
  },
  created: function() {
    console.log(this.localName + ' was created');
  },
  attached: function() {
    console.log(this.localName + ' was attached');
    //this._activateToolBarButtons();
  },
  detached: function() {
    console.log(this.localName + ' was detached');
    //this._deactivateToolBarButtons();
  },
  _activateToolBarButtons : function() {
    // show toolbar buttons unique to this page...
  },
  _deactivateToolBarButtons : function() {
    // hide toolbar buttons unique to this page...
  }
});
</script>
</dom-module>

家
聚合物({
是：“主页”，
就绪：函数（）{
log（this.localName+'ready'）；
},
已创建：函数（）{
log（创建了this.localName+）；
},
附：函数（）{
log（this.localName+“已附加”）；
//这个。_activateToolBarButtons（）；
},
分离：函数（）{
log（this.localName+“已分离”）；
//这个._去激活工具栏按钮（）；
},
_activateToolBarButtons:函数（）{
//显示此页面特有的工具栏按钮。。。
},
_停用ToolBarButtons:函数（）{
//隐藏此页面特有的工具栏按钮。。。
}
});

iron页面实现IronSelectableBehavior

这意味着当项目被设置/取消设置为选中时，将引发“熨斗选择”和“熨斗取消选择”事件

没有理由将元素作为直接子元素。您可以简单地使用自定义元素

<main class="content">
  <iron-pages attr-for-selected="data-route" selected="login" >
    <!-- login page -->
      <page-login data-route="login"></page-login>
    <!-- home page -->
      <page-home data-route="home"></page-home>
  </iron-pages>
</main>

---

然后了解到这些元素是专门为作为iron pages元素的子元素而构建的，使用DOM访问器获取父元素，即iron pages标记。然后为iron select和iron deselect添加一个事件侦听器，以通知您的自定义元素并更改工具栏。

除了

就绪

，

已创建

，Polymer 1.0中还有一个

属性更改

函数，您可以使用它来检测页面属性类已更改为

选定的

Polymer({
    is: "page-home",
    attributeChanged: function(name, type) {
        console.log(this.localName + ' attribute ' + name + ' was changed to ' + this.getAttribute(name));
    },

因此，在iron页面dom模块
ready
脚本中，它将是
this.parentNode.addEventListener（“iron select”，this.ironSelect）
，您可以使用
ironSelect:function（e）{var page=e.target.selected；}方法获取当前页面
我还发现，您可以通过使用Page.js实现路由来实现这一点，例如，如果其他人需要，我也可以发布此解决方案。Page.js对于基本SPA页面路由非常有用。这不是一个完整的路由解决方案。但是很好的开始，这是一个很好的方法。比公认的答案稍微解耦一些。