在聚合物和飞镖中将内容标记呈现为模板的一部分

Question

我希望使用聚合物和飞镖制作一个通用列表.我正在扩展UL元素.我想将模板变量放在此自定义元素的内容中.

<ul is="data-ul">
  <li>{{item['first_name']}}</li>
</ul>

自定义元素

<polymer-element name="data-ul" extends="ul">
  <template repeat="{{item in items}}">
      <content></content>
  </template>
  <script type="application/dart" src="data-ul.dart"></script>
</polymer-element>

我期待模板变量被插值,但它只是按原样输出到DOM.如何输出要呈现为模板的内容标记,而不仅仅是直接输出？

Answer 1

不幸的是,这里有两个问题.

1. <content>不能这样使用.它是一个占位符,用于在Shadow DOM中的特定位置渲染轻型DOM节点.第一个<content>选择节点,获胜[ 1 ].像你一样冲压掉一堆,虽然非常直观,但不会按预期工作.

2. 您将聚合物的内部世界与元素外部的外部世界混合在一起.这实际意味着绑定(例如{{}})仅在上下文中起作用<polymer-element>.

您可以做的一件事是创建分布式轻DOM子项的副本作为items元素的属性.在JavaScript中,这看起来像:

<template repeat="{{item in items}}">
  <li>{{item['first_name']}}</li>
</template>
<content id="content" select="li"></content>
<script>
  Polymer('data-ul', {
    ready: function() {
      this.items = this.$.content.getDistributedNodes();
    }
  });
</script>

注意:我使用的唯一原因<content select="li">是确保元素只接受<li>节点.如果您不担心用户使用其他类型的元素,请使用this.items = [].slice.call(this.children);.