在运行时更改模板内容(Change template content at runtime)

2019-10-19 03:09发布

我想建立的是生成一个列表输出聚合物元件

<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> S的关系被重复用于每个itemdata<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 -->运行时将是巨大的。

Answer 1:

不幸的是,你可以将你在规范(指定的内容只有一个时间http://www.w3.org/TR/2013/WD-components-intro-20130606/#insertion-points ):

插入点让你重新排序或选择性忽略渲染主机的孩子,但他们不会造成什么被渲染多次。 当这些元素在选择儿童需要通过树顺序决定。 一旦孩子选择在一个插入点进行渲染,它不能由一个又一个,这就是为什么细节开装饰只呈现摘要一度声称。



文章来源: Change template content at runtime