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>

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

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

Answer 1

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

});

Answer 2

您应该在此处查看我的 Polymer 组件 <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>

这里我只是想将页面标题绑定到 <iron-pages> 中当前所选元素的 title 属性。它工作得很好！您可能必须适应自己的情况，但这应该会让您继续前进。

Polymer - 使用 iron-pages 更改页面标题

Polymer - Change page title with iron-pages

web-component

polymer-1.0