仅在需要时实例化聚合物元素?

时间:2015-03-16 15:43:58

标签: javascript polymer

似乎即使我拥有<template id="{{someCondition}}">...</template>,它仍会通知polymer-element的所有生命周期事件。如果我有一个登录屏幕并且只想在登录成功时实例化polymer-elements的其余部分,我将如何进行?

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

谢谢!

1 个答案:

答案 0 :(得分:3)

是的,有内置方式。它被称为dynamic HTML imports 以下是示例Plunk

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

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

在原型中:

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

        this.dynamic_element_registered = true;

      }.bind(this));
  },