В Polymer 1 как я могу обернуть распределенный шаблон другим элементом?

У меня есть пользовательский элемент (скажем, 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)
}

что конечно не работает.


data-binding polymer templating polymer-1.0
person Daniele Orlando    schedule 11.07.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Возможно, я вас неправильно понял, но вы не создаете структуру страницы, как в приведенном вами примере. Сначала используйте элементы 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>

Я просто написал это от руки, без тестирования, поэтому там может быть какой-то ошибочный код, но это пример того, как это может выглядеть.

person Rickard Elimää    schedule 13.07.2017