polymer - 用铁页更改页面标题

Question

假设我有 iron-pages 的演示实现(来自它的 Github page ):

<iron-pages selected="0">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</iron-pages>

<script>
  document.addEventListener('click', function(e) {
    var pages = document.querySelector('iron-pages');
    pages.selectNext();
  });
</script>

现在，我想为页面标题添加一个后缀以反射(reflect)所选页面。所以对于 <div>One</div>我想附加 - selected One等等。

到目前为止我得到了什么是在 routing.html 中进行更改选择路线后，在这里进行更改似乎有点奇怪。有没有其他方法可以做到这一点？

Answer 1

你应该看看我的 Polymer 组件 <page-title>这里:https://github.com/zacharytamas/page-title/ .您也可以使用 Bower 安装它:

bower install page-title --save

您可能需要某种函数来映射 <iron-pages> 中的选定索引。到要显示为标题的文本。在您的示例中，您可以只使用 innerText选择的元素，但实际上你的 <iron-pages>元素实际上会有内容。

这将取决于您的设置，但您可以使用我的组件轻松绑定(bind)它们，如下所示:

<dom-module id="my-app">
  <template>

    <page-title base-title="My Website" 
      title="[[selectedPage.title]]"></page-title>

    <iron-pages selected-item="{{selectedPage}}">
      <div title="First Page">One</div>
      <div title="Second Page">Two</div>
      <div title="Third Page">Three</div>
    </iron-pages>

  </template>
  <script>
    Polymer({
      is: 'my-app'
    });
  </script>
</dom-module>

在这里，我刚刚做了一些将页面标题绑定(bind)到 title 的操作。 <iron-pages> 中当前选定元素的属性.它工作得很好!你可能不得不适应你的情况，但这应该能让你继续前进。