In Polymer 1 wie kann ich eine verteilte Vorlage mit einem anderen Element umhüllen?

Question

Ich habe ein benutzerdefiniertes Element (sagen wir my-view), die als effektive Kinder eine Vorlage mit einigen Anmerkungen für die Datenbindung erhält.

Wie kann ich die verteilte Vorlage mit einem anderen benutzerdefinierten Element umhüllen, sagen wir paper-item?

Dies ist mein Arbeitscode.

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

Innen my-view I

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

und

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

    repeater.templatize(template) 
} 

haben, was ich erreichen will, ist die template wirksame Kinder mit einem anderen benutzerdefinierten Element Einwickeln (lassen Sie uns sagen paper-item).

So etwas wie

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

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

    repeater.templatize(item) 
} 

natürlich, die nicht funktioniert.

Answer 1

Vielleicht habe ich Sie falsch verstanden, aber Sie erstellen keine Seitenstruktur wie das Beispiel, das Sie gaben. Verwenden Sie zuerst die HTML-Elemente und verfeinern Sie sie bei Bedarf mit 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> 

Ich schrieb dies auf freihändig, ohne Prüfung, so könnte es einige fehlerhafte Code drin sein, aber dies ist ein Beispiel dafür, wie es aussehen könnte.