Polymer 1.0+，无法在 light dom 中定义模板供组件使用答案

【问题标题】：Polymer 1.0+, can't define template in light dom for use by componentPolymer 1.0+，无法在 light dom 中定义模板供组件使用
【发布时间】：2015-10-19 23:45:27
【问题描述】：

在 Polymer 1.0+ 中，如何从 light dom 中传入一个模板以在 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 模块中包含一个铁列表，理想情况下，该组件将引用铁列表中的“预测模板”，它将变量绑定到元素。最终，它将使用该模板生成 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>

感谢任何输入。谢谢！

【问题讨论】：

标签： javascript templates polymer polymer-1.0

【解决方案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>

如果这不起作用，请尝试将 weather-forecast 标签包装在 iron-list 内的模板标签中。

【讨论】：

感谢您的回复。但是，该解决方案导致应用程序开发人员（组件用户，而不是组件开发人员）必须设计组件。在 light dom 中传入模板的原因是应用程序开发人员不必了解 Polymer。我的目标是让应用程序开发人员保持简单，以便他们只需要传入一个模板。

【解决方案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

【讨论】：