हैंडलबर्स.जेएस

Question

का उपयोग कर मूल "फॉर" लूप पर इटरेटिंग मैं हैंडलबार्स.जेएस के लिए नया हूं और बस इसका उपयोग करना शुरू कर दिया। अधिकांश उदाहरण किसी ऑब्जेक्ट पर पुनरावृत्ति पर आधारित होते हैं। मैं जानना चाहता था कि लूप के लिए बुनियादी में हैंडलबार्स का उपयोग कैसे करें।

उदाहरण।

for(i=0 ; i<100 ; i++) { 
    create li's with i as the value 
} 

यह कैसे प्राप्त किया जा सकता है?

Answer 1

इसके लिए हैंडलबार में कुछ भी नहीं है लेकिन आप अपने स्वयं के सहायक आसानी से पर्याप्त जोड़ सकते हैं।

अगर तुम सिर्फ कुछ करना तो n बार करना चाहता था:

Handlebars.registerHelper('times', function(n, block) { 
    var accum = ''; 
    for(var i = 0; i < n; ++i) 
     accum += block.fn(i); 
    return accum; 
}); 

और

{{#times 10}} 
    <span>{{this}}</span> 
{{/times}} 

तो आप एक पूरे for(;;) पाश, तो कुछ इस तरह थे:

Handlebars.registerHelper('for', function(from, to, incr, block) { 
    var accum = ''; 
    for(var i = from; i < to; i += incr) 
     accum += block.fn(i); 
    return accum; 
}); 

और

{{#for 0 10 2}} 
    <span>{{this}}</span> 
{{/for}} 

डेमो: http://jsfiddle.net/ambiguous/WNbrL/

Answer 2

यदि आप CoffeeScript

Handlebars.registerHelper "times", (n, block) -> 
    (block.fn(i) for i in [0...n]).join("") 

और

{{#times 10}} 
    <span>{{this}}</span> 
{{/times}} 

Answer 3

यह स्निपेट मामले n में और ब्लॉक की देखभाल के रूप में एक गतिशील मान आता है, और @index प्रदान की तरह वैकल्पिक संदर्भ चर, यह निष्पादन के बाहरी संदर्भ भी रखेगा।

/* 
* Repeat given markup with given times 
* provides @index for the repeated iteraction 
*/ 
Handlebars.registerHelper("repeat", function (times, opts) { 
    var out = ""; 
    var i; 
    var data = {}; 

    if (times) { 
     for (i = 0; i < times; i += 1) { 
      data.index = i; 
      out += opts.fn(this, { 
       data: data 
      }); 
     } 
    } else { 

     out = opts.inverse(this); 
    } 

    return out; 
}); 

Answer 4

शीर्ष जवाब यहाँ अच्छा है, आप ही आप निम्नलिखित

Handlebars.registerHelper('times', function(n, block) { 
    var accum = ''; 
    for(var i = 0; i < n; ++i) { 
     block.data.index = i; 
     block.data.first = i === 0; 
     block.data.last = i === (n - 1); 
     accum += block.fn(this); 
    } 
    return accum; 
}); 

और

{{#times 10}} 
    <span> {{@first}} {{@index}} {{@last}}</span> 
{{/times}}