CODEWITHSUNDEEP
javascripttemplatespolymerpolymer-1.0
rvbyron
rvbyron

Reputation: 179

Polymer 1.0+, can't define template in light dom for use by component

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!

Upvotes: 2

Views: 327

Answers (2)

Tomasz Pluskiewicz
Tomasz Pluskiewicz

Reputation: 3662

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

Upvotes: 0

Srik
Srik

Reputation: 2381

  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.

Upvotes: 0

Related Questions