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

Question

我们的团队正在构建我们的第一个聚合物一体页应用程序，我们不得不对项目中被忽视的组件进行逆向工程。我们需要为核心脚手架中的标题栏设置标题。这在使用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>

我本来打算在模板元素上添加一个属性，以便能够传递标题值，但我不知道如何使用JS来找出哪个模板是有条件渲染（活动）的模板。我似乎找不到任何关于这方面的文件。此外，我还想构建一些可重用的东西（不带ID），可以在任何页面上全局使用。

有人能提供什么建议吗？

干杯，david

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