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

Instantiate polymer-element only when needed?

本文关键字：实例化 聚合物 元素      更新时间：2023-09-26

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

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

谢谢！

是的，有内置的方法。它被称为动态HTML导入这是示例 Plunk

在模板中，如果要传递一些数据，请 warp 动态导入的条件模板中的元素，以确保在注册元素后进行数据绑定。

 <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));
  },
相关文章：