在运行时更改模板内容 [英] Change template content at runtime

问题描述

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

I want to build Polymer element that generates a list output

<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>

希望移动< template id =my中提供的元素< content select =*>< / content> 当<$ c $> $ 时，在<！ - 使用内容 - > 的位置标记-repeat>

and I want to move the elements provided by <content select="*"></content> inside the <template id="my-repeat"> tag (at the position of <!-- use content here -->) when the polymer-list is initiated (ready, attached, ...).

我的聚合物列表 / code>应该像

My polymer-list should be used like

<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> 应该通过< polymer-list> 重复数据中的 code>元素。

As result both <div>s should be repeated for each item in data by the <polymer-list> element.

我尝试了

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

as result I get

<!-- ... -->
<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>
<!-- ... -->

修复虚拟内容正常重复，但动态添加的元素放置在文档片段

The fix dummy content is repeated normally but the dynamically added elements are placed inside a document-fragment but not repeated.

<！ - 使用内容here - > ;

Any hint about manipulating the HTML at <!-- use content here --> at runtime would be great.

推荐答案

不幸的是，你可以只插入一次指定的内容（ http://www.w3.org / TR / 2013 / WD-components-intro-20130606 /＃inserts-points ）：

Unfortunately you can insert you content only one time as specified in specification (http://www.w3.org/TR/2013/WD-components-intro-20130606/#insertion-points):

插入点可让您重新排序或选择性忽略呈现主机的子，但它们不会导致某些东西被多次渲染。树顺序指示每个元素在选择子节点时是否通过。一旦孩子被选择在一个插入点被呈现，它不能被另一个插入点声明，这就是为什么细节 - 打开装饰器只呈现摘要一次。

Insertion points let you reordered or selectively omit rendering the host's children, but they will not cause something to be rendered multiple times. Tree order dictates when each of these elements takes a pass at selecting the children. Once the child is selected to be rendered at one insertion point, it can't be claimed by another one, which is why the details-open decorator only renders the summary once.

这篇关于在运行时更改模板内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！