dart - 在 polymer 和 Dart 中将内容标签渲染为模板的一部分

Question

我希望使用 polymer 和 Dart 制作一个通用列表。我正在扩展 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

不幸的是，这里有两个问题。

<content>不能这样使用。它是一个占位符，用于在 Shadow DOM 中的特定位置渲染轻量级 DOM 节点。第一个<content>选择节点，获胜 [1 ]。像您正在做的那样冲压出一堆，虽然非常直观，但不会按预期工作。

您将 Polymer 的内部世界与元素外部的外部世界混合在一起。这真正意味着绑定(bind)(例如 {{}} )仅在 <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); .