javascript - Polymer如何异步渲染<template>而不影响与用户的交互

Question

我的页面有几个巨大的<template> ，只会在任何时候渲染和显示。但是当改变<template>时渲染需要太长时间。例如:

<polymer-element name = "my-element">
  <template>
   <template if = "{{render == '#1'}}">
      <!--Many elements, takes long time to render-->
   </template>
   <template if = "{{render == '#2'}}">
      <!--Many elements, takes very long time to render-->
   </template>
   <paper-button on-click = "{{changeRender}}"></paper-button>
  </template>
  <script>
    Polymer({
      render: '#1',
      changeRender: function() {
        this.render = '#2';
     }
    });
 </script>
</polymer-element>

当用户点击按钮时，纸张的波纹出现，但卡住并一直停留到 <template if = "{{render == '#2'}}">呈现。我尝试将代码更改为:

changeRender: function() {
  var obj = this;
  this.async(function() {
    obj.render = '#2';
  }, null, 300);
}

现在不会卡了，但是时间延迟对用户来说有点不友好，有没有人有更好的解决方案？谢谢!

Answer 1

这似乎与 https://github.com/Polymer/paper-ripple/issues/10 有关.

您可以做的一件事是在激活模板之前等待波纹动画完成:

<paper-button on-core-transitionend="{{changeRender}}"></paper-button>

changeRender: function() {
  this.render = '#2';
}