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>

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

任何人都可以提供任何建议吗？

干杯，大卫

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

Polymer Scaffolding：每页设置标题：最佳方法

1 个答案: