Polymer: Wie HTML zu Bildschirm zu loopen und zu rendern

Question

Ich arbeite an einem Widget, das Informationen von Drittanbietern aus einer Datenbank mithilfe von Json extrahiert. Sobald die Informationen gesammelt sind, plane ich, die Informationen durchzugehen und den erforderlichen HTML-Code zu erstellen und über eine {{variable}} in die Vorlage einzufügen.

Jetzt bekomme ich ein unerwartetes Ergebnis. Wenn ich das tue, wird das HTML als Text angezeigt.

Hier einige sudo-Code der Emission:

"<div>Name 1</div>" "<div>Name 2</div>" ... n 

statt:

 <polymer-element name="loop-element"> 
      <template> 
        {{customerList}} 
      </template> 
      <script> 
       Polymer('loop-element', { 
        ready: function() { 
         this.loadCustomerList(); 
        } 
        customerList:"Loading customer list...", 

        loadCustomerList: function() { 
         CustomerNameArray[] = //Get the array from jSon file 
         i = 0; 
         do { 
          this.customerList = "<div>" + customerNameArray[i] + "</div>"; 
         } while (customerNameArray[i]); 
        } 

       }); 

      </script> 
     </polymer-element> 

Im Wesentlichen werden die DIV die nicht gerendert werden, anstatt sie auf dem Bildschirm als Text gedruckt werden

Sie können ein JSBin-Beispiel hier sehen: http://jsbin.com/tituzibu/1/edit

Kann jemand empfehlen, wie man eine Liste zur Vorlage ausgibt?

Answer 1

Sie sollten die DOM-basierten Datenbindungsfunktionen von Polymer verwenden, anstatt das Markup selbst zu erstellen.

<template repeat="{{customer, i in customers}}"> 
    <div>{{i}}, {{customer.name}}</div> 
</template> 

http://www.polymer-project.org/docs/polymer/databinding.html#an-example

Answer 2

Vielleicht ein wenig zu spät ... Wenn Sie Ihren Ansatz haften möchten könnten Sie this.injectBoundHTML verwenden:

<polymer-element name="loop-element"> 
      <template> 
        <div id='customerList'> </div> 
      </template> 
      <script> 
       Polymer('loop-element', { 
        ready: function() { 
         this.loadCustomerList(); 
        } 
        customerList:"Loading customer list...", 

        loadCustomerList: function() { 
         CustomerNameArray[] = //Get the array from jSon file 
         i = 0; 
         do { 
          this.customerList = "<div>" + customerNameArray[i] + "</div>"; 
         } while (customerNameArray[i]); 
         this.injectBoundHTML(this.customerList, 
         this.$.customerList); 
        } 

       }); 

      </script> 
     </polymer-element> 

jedoch der erste Ansatz besser ist ..

Answer 3

Polymer v.1.0

/* relative path to polymer.html*/ 
<link rel="import" href="../bower_components/polymer/polymer.html"> 

<dom-module id="employee-list"> 
    <style> 
     /* CSS rules for your element */ 
    </style> 
    <template> 
     <div> Employee list: </div> 
     <template is="dom-repeat" items="{{employees}}"> 
      <div>First name: <span>{{item.first}}</span></div> 
      <div>Last name: <span>{{item.last}}</span></div> 
     </template> 
    </template> 
</dom-module> 

<script> 
    Polymer({ 
     is: 'employee-list', 
     ready: function() { 
      this.employees = [ 
       {first: 'Bob', last: 'Smith'}, 
       {first: 'Sally', last: 'Johnson'} 
      ]; 
     } 
    }); 
</script> 

doc