javascript - 仅在需要时实例化 polymer 元素？

Question

看来即使我有 <template id="{{someCondition}}">...</template>它仍然会通知那个 polymer-element 的所有生命周期事件.如果我有一个登录屏幕并且只想实例化 polymer-elements 的其余部分，我该怎么办？什么时候登录成功？

是否有一些内置方法可以执行此操作(仅在某些情况下实例化和触发生命周期事件)，或者我是否必须在登录成功时使用 Javascript 实例化它们？

谢谢!

Answer 1

是的，有内置的方式。它叫做dynamic HTML imports这是示例 Plunk

在模板中，如果您要传递一些数据，请在条件模板中扭曲动态导入的元素，以确保在注册元素后发生数据绑定(bind)。

 <template if="{{dynamic_element_registered}}" >
  <my-dynamic_element categories_globals={{categories_globals}}>
    I'm just an unknown element.
  </my-dynamic_element>
</template>

在原型(prototype)中:

 dynamic_load: function() {
      console.log('dynamic_load');
      Polymer.import(['my-dynamic_element.html'], function() {

        this.dynamic_element_registered = true;

      }.bind(this));
  },