Repeat over contents, polymer dart

Question

I want to loop over all children of a custom polymer element - for instance, to place each child in a new div.

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

When I try this, I get the toString() version of child, rather than the element itself. Is there a way to reference the element itself inside the repeat, rather than the result of its toString() method?

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2014-08-25T11:56:07

Update

A ready-to-use element for Dart Polymer 1.0 is bwu-bind-html

This is not supported. Moustache binding can't insert HTML.

What you can do though is to use a Polymer element that provides that feature.
Please have look at my answer to HTML Tags Within Internationalized Strings In Polymer.dart <safe-html>.

With this element your code would look like:

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

You might need to customize the NodeValidator construction which defines what kind of Elements are allowed to be added.

This feature might pose security risks (XSS) and is therefore not included in Polymer by default.

Repeat over contents, polymer dart

1 Answers