हैंडलबार्स में वस्तुओं की सरणी पर पुनरावृति कैसे करें?

Question

यह एक मूर्खतापूर्ण सवाल लग सकता है लेकिन मुझे इसका जवाब कहीं भी नहीं मिल रहा है।

मैं इस वेब एपीआई को मार रहा हूँ जो JSON प्रारूप में वस्तुओं की एक सरणी लौटाता है:

हैंडलबार डॉक्स निम्न उदाहरण दिखाता है:

<ul class="people_list">
  {{#each people}}
  <li>{{this}}</li>
  {{/each}}
</ul>

के संदर्भ में:

{
  people: [
    "Yehuda Katz",
    "Alan Johnson",
    "Charles Jolley"
  ]
}

मेरे मामले में मेरे पास सरणी के लिए कोई नाम नहीं है, यह केवल प्रतिक्रिया का मूल उद्देश्य है। मैंने {{#each}}बिना किसी भाग्य के उपयोग करने की कोशिश की है ।

पहली बार हैंडलबार्स का उपयोग कर ... मैं क्या याद कर रहा हूँ?

अपडेट करें

यहाँ मैं आपको जो पूछ रहा हूं उसे दिखाने के लिए एक सरलीकृत फिडेल है: http://jsfiddle.net/KPCh4/2/

क्या हैंडलबार के लिए संदर्भ चर की आवश्यकता एक वस्तु है और एक सरणी नहीं है?

Comments

आप टेम्पलेट ( वर्तमान में ) में एपीआई परिणाम कैसे पास करते हैं ?

— गेब्रियल पेट्रीओली

@ GabyakaG.Petrioli एपीआई मेरा नहीं है, मेरा इस पर कोई नियंत्रण नहीं है। मैं सिर्फ jQuery ajax का उपयोग कर रहा हूं और प्रतिक्रिया ऑब्जेक्ट प्राप्त कर रहा हूं, जो ऑब्जेक्ट्स की एक सरणी है।

— इज़रो

Answer 1

आप thisप्रत्येक ब्लॉक में जा सकते हैं । यहां देखें: http://jsfiddle.net/yR7TZ/1/

{{#each this}}
    <div class="row"></div>
{{/each}}

Comments

फिर क्या {{#each people}}आंतरिक लूप के अंदर बाहरी लूप की सूचकांक संख्या को कॉल करना संभव है {{#each this}}? जैसे{{people@index}}

— रेगरबॉय

Answer 2

इस फिडेल में दोनों eachऔर प्रत्यक्ष जसन हैं। http://jsfiddle.net/streethawk707/a9ssja22/ ।

नीचे सरणी पर चलने के दो तरीके हैं। एक डायरेक्ट जोंस पासिंग के साथ है और दूसरा कंटेंट होल्डर को पास करते हुए जसन सरणी का नामकरण कर रहा है।

उदाहरण 1: नीचे दिया गया उदाहरण small_data वेरिएबल के अंदर सीधे json key (डेटा) को कॉल कर रहा है।

HTML में नीचे दिए गए कोड का उपयोग करें:

<div id="small-content-placeholder"></div>

नीचे HTML के शीर्ष लेख या निकाय में रखा जा सकता है:

<script id="small-template" type="text/x-handlebars-template">
    <table>
        <thead>
            <th>Username</th>
            <th>email</th>
        </thead>
        <tbody>
            {{#data}}
                <tr>
                    <td>{{username}}
                    </td>
                    <td>{{email}}</td>
                </tr>
            {{/data}}
        </tbody>
    </table>
</script>

नीचे एक दस्तावेज तैयार है:

var small_source   = $("#small-template").html();
var small_template = Handlebars.compile(small_source);

नीचे जसन है:

var small_data = {
            data: [
                {username: "alan1", firstName: "Alan", lastName: "Johnson", email: "[e-mail]" },
                {username: "alan2", firstName: "Alan", lastName: "Johnson", email: "[e-mail]" }
            ]
        };

अंत में सामग्री धारक को जसन संलग्न करें:

$("#small-content-placeholder").html(small_template(small_data));

Eg2: प्रत्येक का उपयोग करते हुए Iteration।

नीचे दिए गए json पर विचार करें।

var big_data = [
            {
                name: "users1",
                details: [
                    {username: "alan1", firstName: "Alan", lastName: "Johnson", email: "[e-mail]" },
                    {username: "allison1", firstName: "Allison", lastName: "House", email: "[e-mail]" },
                    {username: "ryan1", firstName: "Ryan", lastName: "Carson", email: "[e-mail]" }
                  ]
            },
            {
                name: "users2",
                details: [
                    {username: "alan2", firstName: "Alan", lastName: "Johnson", email: "[e-mail]" },
                    {username: "allison2", firstName: "Allison", lastName: "House", email: "[e-mail]" },
                    {username: "ryan2", firstName: "Ryan", lastName: "Carson", email: "[e-mail]" }
                  ]
            }
      ];

कंटेंट होल्डर को जसन पास करते समय इसे इस तरह नाम दें:

$("#big-content-placeholder").html(big_template({big_data:big_data}));

और टेम्पलेट जैसा दिखता है:

<script id="big-template" type="text/x-handlebars-template">
    <table>
        <thead>
            <th>Username</th>
            <th>email</th>
        </thead>
        <tbody>
            {{#each big_data}}
                <tr>
                    <td>{{name}}
                            <ul>
                                {{#details}}
                                    <li>{{username}}</li>
                                    <li>{{email}}</li>
                                {{/details}}
                            </ul>
                    </td>
                    <td>{{email}}</td>
                </tr>
            {{/each}}
        </tbody>
    </table>
</script>

Comments

यह कैसे gulp हैंडलबार का उपयोग कर संकलन करता है?

— webkitfanz

Answer 3

मेरा मतलब था template()कॉल में ।।

आपको केवल ऑब्जेक्ट के रूप में परिणाम पास करने की आवश्यकता है। इसलिए बुलाने के बजाय

var html = template(data);

करना

var html = template({apidata: data});

और {{#each apidata}}अपने टेम्पलेट कोड में उपयोग करें

http://jsfiddle.net/KPCh4/4/ पर डेमो
( हटाए गए कुछ बचे हुए ifकोड हटा दिए गए )

Comments

यह अच्छा है, लेकिन AZ जवाब बेहतर है। का उपयोग {{#each this}}सही रूप है।

— इज़रो

वास्तव में, इस तरह से बहुत अधिक समझ में आता है, धन्यवाद!

— वूहो

Answer 4

हैंडलबार्स संदर्भ के रूप में एक सरणी का उपयोग कर सकते हैं। आप .डेटा की जड़ के रूप में उपयोग कर सकते हैं । तो आप अपने सरणी डेटा के साथ लूप कर सकते हैं {{#each .}}।

var data = [
  {
    Category: "General",
    DocumentList: [
      {
        DocumentName: "Document Name 1 - General",
        DocumentLocation: "Document Location 1 - General"
      },
      {
        DocumentName: "Document Name 2 - General",
        DocumentLocation: "Document Location 2 - General"
      }
    ]
  },
  {
    Category: "Unit Documents",
    DocumentList: [
      {
        DocumentName: "Document Name 1 - Unit Documents",
        DocumentList: "Document Location 1 - Unit Documents"
      }
    ]
  },
  {
    Category: "Minutes"
  }
];

$(function() {
  var source = $("#document-template").html();
  var template = Handlebars.compile(source);
  var html = template(data);
  $('#DocumentResults').html(html);
});

.row {
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="DocumentResults">pos</div>
<script id="document-template" type="text/x-handlebars-template">
  <div>
  {{#each .}}
    <div class="row">
      <div class="col-md-12">
        <h2>{{Category}}</h2>
        {{#DocumentList}}
        <p>{{DocumentName}} at {{DocumentLocation}}</p>
        {{/DocumentList}}
      </div>
    </div>
  {{/each}}
  </div>
</script>

Answer 5

का उपयोग कर thisऔर {{this}}। नोड में नीचे कोड देखें। js:

var Handlebars= require("handlebars");
var randomList= ["James Bond", "Dr. No", "Octopussy", "Goldeneye"];
var source= "<ul>{{#each this}}<li>{{this}}</li>{{/each}}</ul>";
var template= Handlebars.compile(source);
console.log(template(randomList));

कंसोल लॉग आउटपुट:

<ul><li>James Bond</li><li>Dr. No</li><li>Octopussy</li><li>Goldeneye</li></ul>