在模板中缓存元素

Question

我的主元素使用了flatiron-element来重定向我的用户:

....
<template if="{{route != null}}">
  <template if="{{route == 'home' || route == ''}}">
    <home-element structure="{{home}}"></home-element>
  </template>
  <template if="{{route == 'research'}}">
    <research-element structure="{{research}}"></research-element>
  </template>
  <template if="{{route == 'highlights'}}">
    <!-- <highlights-element></highlights-element> -->
  </template>
</template>
....

每次修改{{route}}，元素都会被重新创建。是否有一个好的方法来缓存它，这样我们就不必重新加载它，如果它以前加载?

谢谢

Answer 1

您所看到的是Polymer的模板系统按需要实例化每个元素。当你循环路由时，它会从DOM中添加/删除元素。下一次循环时，数据绑定系统将标记出该元素的新实例。这也意味着created()和ready()被称为"再次"。

一个选项是使用<polymer-ui-pages>: http://www.polymer-project.org/docs/elements/polymer-ui-elements.html#polymer-ui-pages

另一种方法是根据需要在CSS中显示/隐藏元素(而不是使用条件模板):http://jsbin.com/zeyoyisu/2/edit