Question

在Polymer 1.0+中，如何从dom-module中使用的光dom传递模板？我希望light dom中的模板具有绑定变量，然后自定义元素使用该模板来显示其数据。

以下是组件用户如何使用它的示例：

<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>

此天气预报组件将在dom-module中包含一个铁列表，理想情况下，该组件将引用铁列表中的“预测模板”，该变量将变量绑定到元素。最终，它将使用该模板生成5天预测。我的问题是我没有看到将基于绑定传递变量的模板放入Polymer 1.0自定义元素的示例。我认为这或类似的事情会相当普遍。

以下是我希望在客户端看到它如何工作的示例，但还没有运气。虽然模板是成功引用的，但它只显示一次，而其他字段实际上显示在循环中。

<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>

任何输入都表示赞赏。谢谢！

Answer 1

您不能在其他聚合物元素中使用dom-bind。

你的第一个元素应该是dom-bind

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

你的第二个元素应该是天气预报

<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>

如果这不起作用，请尝试将天气预报标记包含在铁列表中的模板标记内。

Answer 2

您可以使用Templatizer。您可以查看my blog的示例（还有一个Plunker链接）。

不幸的是，似乎存在一些错误或限制，这会破坏双向绑定：

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

Polymer 1.0+，无法在light dom中定义模板以供组件

2 个答案: