Question

是否有可能在运行时或某些light-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>

在我的polymer-element.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

Answer 1

这正是content insertion points的用途。您可以选择顶级light DOM标记以在Shadow DOM中的特定位置进行渲染。 <content select=""></content>采用CSS选择器并从轻型DOM中获取节点。

你的例子是：

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

对于这样一个简单的案例，您不应该像这样窥探轻型DOM，但为了完整起见，我们可以让您的示例使用几个重要的调整：

document.getElementsByClassName('test')查找整个文档中的节点。这不是你想要的。您只需要<mega-menu>的孩子。而不是document使用this（例如this.querySelectorAll('.test')）。
您正在给<template repeat="{{temp}}">一个NodeList。它无法将其标记出来。它需要一个阵列。像this.temp = [].slice.call(this.querySelectorAll('.test'));这样的东西可行。

http://jsbin.com/balodowi/2/edit

聚合物 - 动态模板渲染

1 个答案: