我正在尝试构建呈现JSON对象集合的通用Web组件,如树视图和多列表视图(在两个列表之间移动项目).我想复制iron-list使用的模式,其中包含单个项目表示的模板被传递到组件中以供重用.
例如,给定此Web组件模板:
<dom-module id="intworkspace-tree">
<template>
<style include="iron-flex iron-flex-alignment">
paper-icon-item {
--paper-item-min-height: var(--intworkspace-tree-margin,30px);
--paper-item-icon-width : var(--intworkspace-tree-margin,30px);
}
paper-icon-item:focus::before,
paper-icon-item:focus::after {
color: inherit;
opacity: 0;
}
.node {
margin-left: var(--intworkspace-tree-margin,30px);;
}
</style>
<slot id="labelView"></slot>
<template id="nodeView">
<div class="layout vertical">
<paper-icon-item on-tap="nodeSelected">
<iron-icon icon="expand-less" slot="item-icon" hidden$="[[!hasNodes(node)]]"></iron-icon>
<!-- label goes here-->
</paper-icon-item>
<iron-collapse class="node" opened hidden$="[[!hasNodes(node)]]">
<intworkspace-tree tree="[[node.nodes]]" embedded></intworkspace-tree>
</iron-collapse>
</div>
</template>
</template>
...
</dom-module>这个用法:
<intworkspace-tree tree="{{testTree}}">
<template><paper-item-body>[[node.name]]</paper-item-body> </template>
</intworkspace-tree>
利用Polymer.Templatize.templatize API加载模板,创建/标记新实例,并使用DOM API将它们附加在一起,并将它们添加到Web组件的shadow DOM中.
访问模板内容,将它们组合在一起,创建和导入新模板,然后根据需要克隆它.
在经历了很多逆境之后,我能够成功地实现#1而不是#2,这是我的问题的动力.#2对我来说更吸引人,因为我更容易合并模板一次而不是合并他们生成的标记实例,这种方法似乎是我可以重用嵌套模板(如dom-repeat)的唯一方法.
我的主要障碍是,一旦聚合物或者它的聚合物填充,模板变得不透明,并且只能被聚合物模板化功能使用.例如,此代码在没有任何Polymer导入的情况下工作正常:
<template>
<div>Template Contents</div>
</template>
<div> …