Templates in the Light DOM

64 views
Skip to first unread message

rvb...@gmail.com

unread,
Oct 20, 2015, 12:00:38 PM10/20/15
to Polymer
In Polymer 1.0+, how do you pass in a template from the light DOM to be used in the dom-module? I'd like the template in the light DOM to have bind variables, then the custom element use that template to display its data. This way, the application developer (component user, not the component developer) does not have to know about Polymer, iron-list's, dom-bind's, nor do they have to design a component.

Here is an example of how it would be used by the component user:


<weather-forecast days="5" as="day">
   
<template id="forecast-template">
       
<img src="{{day.weatherpic}}">
       
<div>{{day.dayofweek}}</div>
       
<div>{{day.wordy}}</div>
       
<div>{{day.highlowtemp}}</div>
   
</template>
</weather-forecast>


This weather-forecast component would contain an iron-list in the dom-module and ideally, the component would reference the "forecast-template" inside the iron-list that would bind the variables to the element. Ultimately, it would generate a 5-day forecast using that template. My issue is that I haven't seen an example of bind-passing variable based templates into a Polymer 1.0 custom element. I would think this or something similar would be fairly commonplace.

The following is an example of how I would like to see it work on the client side, but no luck yet. Although the template is successfully referenced via the <content> tag, it only displays once, while other fields actually do show in the loop.


<dom-module id="weather-forecast">
   
<template is="dom-bind">
       
<iron-list items="[[days]]" as="day">
           
<content selector='#forecast-template'"></content>
       
</iron-list>
   
</template>
</dom-module>


Any input is appreciated. Thanks!

This is already cross posted at Stack Overflow here.
Reply all
Reply to author
Forward
0 new messages