聚合物-动态模板渲染 [英] Polymer - dynamic template rendering

问题描述

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

is it somehow possible to render the template in a polymer element dynamically at runtime or when some light-dom elements are available? I have the following situation:

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中，我想做以下事情:

in my polymer-element.html i want to do something as follows:

<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){}
});

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

Now, my question is - how do i get this to work? do i need to bind something on my template? or do i need some kind of event-listener or observer on something?

Gbeschbacher，谢谢

Thanks, Gbeschbacher

推荐答案

这正是内容插入点用于.您可以选择顶级轻型DOM标记，以在阴影DOM"中的特定位置进行渲染. <content select=""></content>使用CSS选择器并从轻型DOM中获取节点.

This is precisely what content insertion points are for. You can select top-level light DOM markup to render at specific locations in the Shadow DOM. <content select=""></content> takes a CSS selector and grabs nodes from the light DOM.

您的示例将是:

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

在这种简单情况下，您不必像这样撬动轻型DOM ，但是为了完整起见，我们可以将您的示例与一些重要的调整:

You should not need to pry into the light DOM like this for such a simple case, but for the sake of completeness, we can get your example working with a few important tweaks:

1. document.getElementsByClassName('test')在整个文档中查找节点.这不是您想要的.您只需要<mega-menu>的子级.代替document，使用this(例如this.querySelectorAll('.test')).
2. 您要为<template repeat="{{temp}}">提供一个NodeList.它无法将其消除.它期望一个数组. this.temp = [].slice.call(this.querySelectorAll('.test'));之类的东西可以工作.

1. document.getElementsByClassName('test') looks for nodes in the entire document. This is not what you want. You only want children of <mega-menu>. Instead of document use this (e.g. this.querySelectorAll('.test')).
2. You're giving <template repeat="{{temp}}"> a NodeList. It won't be able to stamp that out. It expects an Array. Something like this.temp = [].slice.call(this.querySelectorAll('.test')); would work.

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

这篇关于聚合物-动态模板渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！