重复内容，聚合物飞镖答案

【问题标题】：Repeat over contents, polymer dart重复内容，聚合物飞镖
【发布时间】：2014-10-14 19:13:32
【问题描述】：

我想遍历自定义聚合物元素的所有子元素 - 例如，将每个子元素放在一个新的 div 中。

<template repeat="{{child in children}}">
  <div>
    {{child}}
  </div>
</template>

当我尝试这个时，我得到了 child 的 toString() 版本，而不是元素本身。有没有办法在重复中引用元素本身，而不是其 toString() 方法的结果？

【问题讨论】：

【解决方案1】：

更新

Dart Polymer 1.0 的即用型元素是bwu-bind-html

不支持。小胡子绑定无法插入 HTML。

您可以做的是使用提供该功能的 Polymer 元素。
请看我对HTML Tags Within Internationalized Strings In Polymer.dart<safe-html>的回复。

使用此元素，您的代码将如下所示：

<template repeat="{{child in children}}">
  <div>
    <safe-html model="{{child}}"></safe-html>
  </div>
</template>

您可能需要自定义 NodeValidator 构造，该构造定义了允许添加的元素类型。

此功能可能会带来安全风险 (XSS)，因此默认情况下不包含在 Polymer 中。

【讨论】：

此类用例的推荐方法是什么？例如，我需要在 Dart 中创建一些自定义视图（卡片）（基于动态数据），并希望使用 Polymer 将这些卡片放置在表格视图中。我应该为此创建一个新问题吗？
我不确定你的意思。这种方法很好，但是当你使用它时，你应该意识到安全隐患。例如，绑定用户输入（例如使用此元素从数据库加载）是非常危险的。如果用户在其name 字段中输入<script> some malicious JavaScript</script> 之类的内容，并且您使用<safe-html> 向其他用户显示此内容（例如在讨论部分中），则此脚本将在每个访问者浏览器中执行。只要您只绑定静态 HTML 或不包含任何用户输入的动态 HTML，就可以使用它。