Я хочу построить полимерный элемент, который формирует выходной списокИзменения во время выполнения
<polymer-element name="polymer-list>
<template>
<template id="my-repeat" repeat="{{item in listData}}">
<!-- use content here -->
<!-- some fix dummy content to see how this is handled -->
<div id="div_{{item['item']['index']}}">{{item['item']['index']}}</div>
</template>
<content id="content" select="*"></content>
</template>
<script type="application/dart" src="polymer_list.dart"></script>
</polymer-element>
, и я хочу, чтобы переместить элементы, предусмотренные <content select="*"></content>
внутри <template id="my-repeat">
тега (в положении <!-- use content here -->
), когда polymer-list
(готово, прикреплено, ...).
Мои polymer-list
должны быть использованы как
<polymer-list id="list" data="{{data}}" on-polymer-select="{{selectAction}}">
<div class="header">{{item['index']}}</div>
<div class="item {{item['selected']}}">Index: {{item['index']}}</div>
</polymer-list>
В результате оба <div>
с должны повторяться для каждого item
в data
по <polymer-list>
элемента.
Я попытался
var listContent = ($['content'] as ContentElement).getDistributedNodes();
var t = ($['my-repeat'] as TemplateElement);
listContent.forEach((n) => t.append(n.clone(true));
// listContent.forEach((n) => t.content.append(n.clone(true)); // didn't work either
как результат я получаю
<!-- ... -->
<template id="my-repeat" repeat="{{item in listData}}">
#document-fragment
<div class="header"></div>
<div class="item">Index: </div>
</template>
<div id="div_0">0</div>
<div id="div_1">1</div>
<div id="div_0">2</div>
<!-- ... -->
Содержание фиктивная исправление повторяется, как правило, но динамически добавленные элементы размещены внутри document-fragment
, но не повторяется.
Любой намек на манипулирование HTML на <!-- use content here -->
во время выполнения будет отличным.