在 Polymer 1 中，如何用另一个元素包装分布式模板？答案

【问题标题】：In Polymer 1 how can I wrap a distributed template with another element?在 Polymer 1 中，如何用另一个元素包装分布式模板？
【发布时间】：2017-07-11 19:40:46
【问题描述】：

我有一个自定义元素（比如说my-view），它接收一个带有一些数据绑定注释的模板作为有效子元素。

如何用另一个自定义元素包装分布式模板，比如paper-item？

这是我的工作代码。

<my-view>
    <template>[[ item.name ]]</template>
</my-view>

在my-view里面我有

<template id="Repeater" is="dom-repeat">
</template>

和

_templatize() {
    const repeater = this.$.Repeater
    const template = this.queryEffectiveChildren('template')

    repeater.templatize(template)
}

我想要实现的是用另一个自定义元素（比如说paper-item）包装template 有效的子元素。

类似

_templatize() {
    const repeater = this.$.Repeater
    const template = this.queryEffectiveChildren('template')

    const item = this.create('paper-item')
    item.appendChild(template.content)

    repeater.templatize(item)
}

这当然行不通。

【问题讨论】：

标签： data-binding polymer polymer-1.0 templating

【解决方案1】：

也许我理解错了，但你没有像你给出的例子那样创建页面结构。首先使用 HTML 元素，如果需要的话，可以使用 javascript 来添加它。

<dom-module id="my-view">

  <template>

    <template is="dom-repeat" items="[[anArrayWithStrings]]" as="someValue">
      <paper-item>[[someValue]]</paper-item>
    </template>

    <template is="dom-repeat" items="[[anArrayWithObjects]]" as="employee">
      <paper-item two-line>
        <div>[[employee.name]]</div>
        <div>[[employee.title]]</div>
      </paper-item>
    </template>

  </template>

  <script>

    Polymer({
      is: 'my-view',

      properties: {
        anArrayWithStrings: {
          type: Array,
          value: function() { return ['firstOne', 'secondOne', 'thirdOne']; }
       },

       anArrayWithObjects: {
          type: Array,
          value: function() { return [
             {'name': 'Sarah',  'title': 'accountant'},
             {'name': 'Ingrid', 'title': 'engineer'} ]; }
          },
     },

    ready: function() {
      //enter code here
    },

  </script>
</dom-module>

我只是徒手写的，没有测试，所以里面可能有一些错误的代码，但这是一个例子。

【讨论】：