聚合物-动态模板渲染

Polymer - dynamic template rendering

本文关键字：动态 聚合物      更新时间：2023-09-26

是否有可能在运行时动态渲染模板中的聚合物元素或当一些光dom元素可用?我有以下情况:

index.html
<mega-menu>
  <span class="menuTriggerText">Open Menu</span>
  <ul class="test">
    <li>TEST1</li>
    <li>TEST2</li>
  </ul>
  <ul class="test">
    <li>TEST1</li>
    <li>TEST2</li>
  </ul>
</mega-menu>

在我的聚合物元素。html我想做的事情如下:

<template>
  <template repeat="{{temp}}"><p>I want to try this</template>
</template>
Polymer('mega-menu, {
  created:function(){},
  ready: function(){
    //getting markup from light-dom
    this.temp = document.getElementsByClassName('test');
  },
  attached:function(){},
  detached: function(){},
  attributeChanged: function(attrName, oldVal, newVal){}
});

现在，我的问题是-我如何让它工作?我需要在模板上绑定一些东西吗?或者我是否需要某种事件侦听器或观察器?

谢谢,Gbeschbacher

这正是内容插入点的作用。您可以选择在阴影DOM中的特定位置渲染顶级光DOM标记。<content select=""></content>接受一个CSS选择器，并从light DOM中获取节点。

你的例子是:

<polymer-element name="mega-menu" noscript>
  <template>
    <content select=".test"></content>
  </template>
</polymer-element>

对于这样一个简单的例子，您不需要像这样探查light DOM，但是为了完整起见，我们可以通过一些重要的调整使您的示例工作:

  1. document.getElementsByClassName('test')查找整个文档中的节点。这不是你想要的。你只想要<mega-menu>的孩子。用this代替document(例如this.querySelectorAll('.test'))。
  2. 你给<template repeat="{{temp}}">一个NodeList。它将无法消除这种情况。它需要一个数组。比如this.temp = [].slice.call(this.querySelectorAll('.test'));就可以了。
http://jsbin.com/balodowi/2/edit

相关文章：