पॉलिमर:

Question

स्क्रीन पर एचटीएमएल को लूप और रेंडर कैसे करें मैं एक विजेट पर काम कर रहा हूं जो जेसन का उपयोग कर डेटाबेस से तीसरे पक्ष की जानकारी खींचता है। एक बार जानकारी एकत्र हो जाने के बाद, मैं जानकारी के माध्यम से लूप करने और आवश्यक HTML कोड बनाने और इसे {{variable}}

के माध्यम से टेम्पलेट में डालने की योजना बना रहा हूं, अब मुझे एक अप्रत्याशित परिणाम मिल रहा है। जब मैं ऐसा करता हूं, तो HTML को टेक्स्ट के रूप में प्रदर्शित किया जा रहा है।

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

बजाय::

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

अनिवार्य रूप से DIV के रेंडर नहीं किया जा रहा है, इसके बजाय वे स्क्रीन पर पाठ के रूप में मुद्रित किया जा रहा है:

यहाँ मुद्दे के कुछ sudo कोड है

Name 1 
Name 2 
Name n... 

आप यहां एक जेएसबीन उदाहरण देख सकते हैं: http://jsbin.com/tituzibu/1/edit

क्या कोई भी टेम्पलेट में सूची आउटपुट करने के बारे में सलाह दे सकता है?

Answer 1

आपको मार्कअप स्वयं बनाने के बजाय पॉलिमर की डोम-आधारित डेटा-बाइंडिंग सुविधाओं का उपयोग करना चाहिए।

<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

हो सकता है कि एक छोटे से देर हो गई ... आप this.injectBoundHTML इस्तेमाल कर सकते हैं आप अपने दृष्टिकोण पर कायम करना चाहते हैं:

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

हालांकि पहले दृष्टिकोण बेहतर है ..

Answer 3

पॉलिमर 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