如何使用 Polymer 在文档的 <head> 中绑定数据？答案

【问题标题】：How can one bind data within the <head> of the document using Polymer?如何使用 Polymer 在文档的 <head> 中绑定数据？
【发布时间】：2016-12-27 14:16:53
【问题描述】：

如何使用 Polymer 在文档的<head> 标签内绑定数据？

我问这个是因为像<title> 这样的页面信息需要根据用户正在浏览的页面而改变，我想通过写<title>{{title}}</title> 来与框架的其余部分保持一致。

谢谢

【问题讨论】：

标签： data-binding polymer html-head

【解决方案1】：

我怀疑这是不可能的，因为要使数据绑定起作用，元素（或带有 textContent 的元素）需要从 Polymer 继承，当然 head 或 title 不是。

您可以做的是创建一个放置在主体中的元素 (<proxy-title>?)，并以编程方式在观察者中定位 dom 中的 title 元素并写入它具有的 title 属性。

有点像

<dom-module id="proxy-title">
  <template>
    <style>
      :host {
        display:none;
      };
    </style>
  </template>
  <script>
    Polymer({
      is: 'proxy-title',
      properties: {
        title: {
          type: String,
          value: '',
          observer: '_titleChanged'
        }
      },
      _titleChanged: function(title) {
        document.title = this.title;
      }

    });
  </script>
</dom-module>

你会这样使用它

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<!-- other head stuff -->
</head>
<body>
  <proxy-title title="[[someTitle]]"></proxy-title>

  <!-- ... other stuff here -->

</body>
</html>

【讨论】：

感谢 akc42。回家后会测试这个！