在聚合物和飞镖中渲染内容标签作为模板的一部分 [英] Rendering a content tag as part of a template in polymer and dart

问题描述

我想使用聚合物和飞镖做一个通用列表。我扩展UL元素这样做。我想将模板变量放在此自定义元素的内容中。

I wish to make a generic list using polymer and dart. I am extending the UL element to do so. I want to place template variables within the content of this custom element.

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

I was expecting the template variable to be interpolated however it simply gets outputted to the DOM as is. How do I output the content tag to be rendered as a template and not just directly outputted?

推荐答案

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

Unfortunately, there are two issues here.

1. < content> 它是一个占位符，用于在Shadow DOM中的特定位置渲染轻DOM节点。第一个< content> 选择节点，获胜[ 1 ]。

1. <content> cannot be used like this. It's a placeholder for rendering light DOM nodes at specific locations in the Shadow DOM. The first <content> that selects nodes, wins [1]. Stamping out a bunch like you're doing, while very intuitive, won't work as expected.

您正在混合聚合物的内部世界与外部世界外的元素。这真的意味着绑定（例如 {{}} ）仅在< polymer-element> 。

You're mixing the internal world of Polymer with the external world outside the element. What this really means is that bindings (e.g. {{}}) only work in the context of <polymer-element>.

你可以做的一件事是创建一个分布式的光DOM子文件的副本为 items 属性。在JavaScript中，这看起来像：

One thing you can do is create a copy of the distributed light DOM children as the items property of your element. In JavaScript this looks like:

<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）; 。

Note: The only reason I've used <content select="li"> is to insure the element only takes in <li> nodes. If you're not worried about users using other types of elements, just use this.items = [].slice.call(this.children);.

这篇关于在聚合物和飞镖中渲染内容标签作为模板的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！