Question

我有一个自定义元素（让我们说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)
}

我想要实现的是将template有效孩子包裹在另一个自定义元素中（让我们说paper-item）。

像

这样的东西

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

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

    repeater.templatize(item)
}

当然不起作用。

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

我只是徒手写了这个，没有经过测试，因此可能会有一些错误的代码，但这是它的外观示例。

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

1 个答案: