聚合物脚手架:设置每页标题:最佳方法

Question

我们的团队正在构建我们的第一个聚合物都在一个页面上的应用程序，我们不得不对项目中被忽视的部分进行逆向工程。我们需要为core-scaffolding中的标题栏设置标题。使用JS在简单的页面上很容易做到这一点，但是一些页面具有显示内容的条件模板，每个页面都需要自己的标题。

例如

<core-scaffolding>
<div id="title">Dynamic Title goes here</div>
<core-animated-pages transitions="cross-fade">
  <section>
   <div cross-fade>
<my-element>
<template if="{{condition1}}"></template>
Content 1
</template>

<template if="{{condition2}}"></template>
Content 2
</template>

<template if="{{condition3}}"></template>
Content 3
</template>
</my-element>
</div>
  </section>
  <section>
    <div cross-fade></div>
  </section>
</core-animated-pages>

我打算在模板元素上添加一个属性，以便能够传递title值，但是我不知道如何使用JS来找出哪个模板是有条件呈现(活动)的模板。我似乎找不到任何关于这方面的文档。另外，我想构建一些可重用的东西(不是I)，可以在任何页面上全局使用。

有没有人能提供一些建议？

干杯，大卫

Answer 1

我不认为我会对此使用条件模板。如果该条件发生了很大变化，则每次更改时都会向dom中添加和删除模板的内容。我认为使用隐藏属性或使用数据绑定来动态更改文本会更好。

隐藏属性

<span hidden?="{{!condition1}}">Content 1</span>
<span hidden?="{{!condition2}}">Content 2</span>
<span hidden?="{{!condition2}}">Content 3</span>

数据绑定

<span>{{content}}</span>

然后你可以像平常一样在javascript中改变数据绑定。

if (condition1) {
  this.content = 'Content 1';
}