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

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

<content>不能像这样使用。它是一个占位符，用于在Shadow DOM中的特定位置渲染轻型DOM节点。选择节点的第一个<content>赢得[1]。像你一样冲压掉一堆，虽然非常直观，但不会按预期工作。
您将聚合物的内部世界与元素外部的外部世界混合在一起。这实际意味着绑定（例如{{}}）仅适用于<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);。

Answer 2

为此，您应该覆盖parseDeclaration方法。此方法负责解析/创建将绑定的所需html。例如，假设您有下一个模板

<polymer-element name="data-ul" extends="ul" attributes="items">
  <template>
    <template repeat="{{item in items}}" ref="itemTemplate"></template> <!-- this is the replacement of content tag -->
  </template>
  <script type="application/dart" src="data-ul.dart"></script>
</polymer-element>

或者，如果您想要一些默认元素：

<polymer-element name="data-ul" extends="ul" attributes="items">
  <template>
    <template repeat="{{item in items}}">
      <!-- Def elements -->
      <template bind="{{item}}" ref="itemTemplate"></template> <!-- this is the replacement of content tag -->  
      <!-- Def elements -->
    </template>
  </template>
  <script type="application/dart" src="data-ul.dart"></script>
</polymer-element>

然后你应该有下一堂课：

@CustomTag('data-ul')
class DataUl extends LiElement with Polymer, Observable {
  DataUl.created() : super.created();

  @published List items;

  void parseDeclaration(Element elementElement) {
    // We need to remove previous template from element.templateContent
    // in that way it no continues adding a new content every time that we instantiate 
    // this component.
    var previousTemplate = element.templateContent.querySelector('template#item');
    if(previousTemplate != null)
      previousTemplate.remove();

    var t = this.querySelector('#itemTemplate'); // Gets the template with id itemTemplate from the content html
    if(t != null)  // if not null
      element.templateContent.append(t); // append itemTemplate to element.templateContent
    else 
      element.templateContent.append(new TemplateElement()..id='itemTemplate'); //if no template is added append an empty template to avoid errors


    super.parseDeclaration(elementElement); // call super
  }
}

最后使用自定义元素如下：

<ul is="data-ul" items="{{[{'first_name': 'jay'}, {'first_name': 'joy'}]}}">
  <template id="itemTemplate">
    <li>{{item['first_name']}}</li>
  </template>
</ul>

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

2 个答案: