Question

我想构建生成列表输出的Polymer元素

<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">在标记内（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>个。{/ p>

我试过

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的提示都会很棒。

Answer 1

不幸的是，您只能按照规范（http://www.w3.org/TR/2013/WD-components-intro-20130606/#insertion-points）中指定的内容插入一次内容：

插入点允许您重新排序或有选择地省略渲染主机的子节点，但它们不会导致多次渲染。树顺序决定了这些元素中的每一个在选择子元素时都会通过。一旦选择了孩子在一个插入点进行渲染，它就不能被另一个插入点声明，这就是详细信息 - 打开装饰器只渲染一次摘要的原因。

在运行时更改模板内容

1 个答案: