聚合体.带铁页的更改页标题

Question

假设我有iron-pages的演示实现(来自它的Github页面)：

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

现在，我想在页面标题中添加一个后缀，以反映所选的页面。因此，对于<div>One</div>，我想附加- selected One等等。

到目前为止，我得到的是在路由被选择时在routing.html中进行更改，但是在这里进行更改似乎有点奇怪。还有其他方法吗？

Answer 1

你应该看看我的聚合物成分<page-title>在这里：https://github.com/zacharytamas/page-title/。您也可以使用Bower安装它：

bower install page-title --save

您可能需要某种函数，将选定的索引从<iron-pages>映射到要显示为标题的文本。在您的示例中，您可以只使用所选元素的innerText，但是在实践中，您的<iron-pages>元素实际上会在它们中包含内容。

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

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

在这里，我做了一些有趣的工作，将页面标题绑定到当前从title中选择的元素的<iron-pages>属性。效果很好！你可能不得不接受你的处境，但这应该会让你开始行动。

Answer 2

title元素的值可以是基于{{selected}}值的计算属性，即：

<myTitle text={{title}} currentSelection={{selected}}></myTitle>

元素的//声明部分

<dom-module id="myTitle">
<template>
    <div>{{title}}</div>
</template>
</dom-module>

//祈使部分

Polymer({

is: 'myTitle',

properties: {
    title: {
        type: String,
        computed: 'generateTitle'
    },

    currentSelection: {
        type: Number
    }
},

'generateTitle': function(){
    return '- selected' + this.currentSelection;
}

});