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>

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

我到目前为止是在选择路线后在routing.html进行更改但在此处进行更改似乎有点奇怪。有没有其他方法可以做到这一点？

Answer 1

您应该在这里查看我的Polymer组件{ "default_extend_env": {"PATH": "/usr/local/opt/python/bin/:{PATH}"} }：https://github.com/zacharytamas/page-title/。您也可以使用Bower安装它：

<page-title>

您可能想要某种功能，将所选索引从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属性。它运作得很好！你可能不得不采用你的情况，但这应该让你去。

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

});

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

2 个答案: