Polymer 聚合物-用铁页更改页面标题

假设我有

iron pages

（来自its）的演示实现：

一个
两个
三
document.addEventListener（'click'，函数（e）{
var pages=document.querySelector（'iron-pages'）；
pages.selectNext（）；
});

现在，我想在页面标题中添加一个后缀，以反映所选页面。所以对于

One

我想附加

-选择的One

等等

---

到目前为止，我得到的是在选择路线后在

routing.html

中进行更改，但在这里进行更改似乎有点奇怪。还有其他方法吗？

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

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

---

您应该在此处查看我的聚合物组件

。您也可以使用Bower安装它：

bower install page-title --save

您可能需要某种函数，将所选索引从

映射到要显示为标题的文本。在您的示例中，您可以只选择所选元素的

内部文本

，但实际上您的

元素中实际上包含内容

这取决于您的设置，但您可以使用my component轻松绑定它们，如下所示：

<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

属性。它工作得很好！您可能必须适应您的情况，但这应该会让您继续。

应该澄清这是使用Polymer Starter Kit。我明白这一概念，但使用现有的

标记如何？我认为Polymer 1.0允许您扩展本机HTML元素，因此，您可以使用

标记作为基础，并从中添加功能：您是否有一个绑定属性的示例页面？还是一个例子？

Polymer({

is: 'myTitle',

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

    currentSelection: {
        type: Number
    }
},

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

});

bower install page-title --save

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