2

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.

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 references, 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!

rvbyron
  • 179
  • 1
  • 4

2 Answers2

0

  1. You cannot use dom-bind inside another polymer element.

  2. Your first element should just be dom-bind

    <template is="dom-bind">
    <iron-list items="[[days]]" as="day">
        <weather-forecast day=[[day]]></weather-forecast>
    </iron-list>
</template>

  3. Your second element should be weather-forecast

    <dom-module id="weather-forecast">
    <template>
        <style></style>
        <img src="{{day.weatherpic}}">
        <div>{{day.dayofweek}}</div>
        <div>{{day.wordy}}</div>
        <div>{{day.highlowtemp}}</div>
    </template>
    <script>
        Polymer({
            is: "weather-forecast",
            properties: {
                day: {
                    type: Object
                }
            }
        });

    </script>
</dom-module>

  4. If this does not work, try wrapping the weather-forecast tag inside a template tag inside iron-list.

Srik
  • 2,341
  • 2
  • 21
  • 35
  • Thanks for the response. However, this solution results in the application developer (component user, not component developer) having to design a component. The reason for passing in a template in the light dom is that the application developer doesn't have to know Polymer. My goal is to keep this simple on the application developer so they only need to pass in a template. – rvbyron Oct 20 '15 at 14:58
0

You can use the Templatizer. You can look at my blog for some example (there's also a Plunker link).

Unfortunately there seems to be some bug or limitation, which breaks two way binding:

Add a "dynamic" element with data-binding to my polymer-element

Polymer: Updating Templatized template when parent changes

Two way data binding with Polymer.Templatizer

Community
  • 1
  • 1
Tomasz Pluskiewicz
  • 3,622
  • 1
  • 19
  • 42