मूंछें में टेम्प्लेटिंग, अल्पविराम द्वारा अलग किए गए अल्पविराम की सूची को व्यक्त करने का एक सुंदर तरीका है?

Question 1

मैं मस्टैच टेंपलेटिंग लाइब्रेरी का उपयोग कर रहा हूं और एक अनुगामी अल्पविराम के बिना अल्पविराम से अलग सूची बनाने की कोशिश कर रहा हूं , जैसे

लाल, हरा, नीला

अनुगामी अल्पविराम के साथ एक सूची बनाना सीधा है, संरचना को देखते हुए

{
  "items": [
    {"name": "red"},
    {"name": "green"},
    {"name": "blue"}
  ]
}

और टेम्पलेट

{{#items}}{{name}}, {{/items}}

इसका समाधान होगा

लाल, हरे, नीले,

हालांकि मैं अनुगामी अल्पविराम के बिना मामले को व्यक्त करने का एक सुंदर तरीका नहीं देख सकता। मैं हमेशा टेम्पलेट में पास करने से पहले सूची में कोड उत्पन्न कर सकता हूं, लेकिन मैं सोच रहा था कि क्या लाइब्रेरी आपको वैकल्पिक दृष्टिकोण प्रदान करती है जैसे कि आपको यह पता लगाने की अनुमति है कि क्या यह टेम्पलेट के भीतर एक सूची में अंतिम आइटम है या नहीं।

Question 2

एचआरएम, संदिग्ध, मूंछें डेमो आपको बहुत कुछ दिखाती हैं, firstसंपत्ति के साथ , कि कॉमा डालते समय आपको पता लगाने के लिए जेएसएन डेटा के अंदर तर्क रखना होगा।

तो आपका डेटा कुछ इस तरह दिखाई देगा:

{
  "items": [
    {"name": "red", "comma": true},
    {"name": "green", "comma": true},
    {"name": "blue"}
  ]
}

और आपका टेम्प्लेट

{{#items}}
    {{name}}{{#comma}},{{/comma}}
{{/items}}

मुझे पता है कि यह सुरुचिपूर्ण नहीं है, लेकिन जैसा कि दूसरों ने उल्लेख किया है कि मूंछें बहुत हल्के हैं और ऐसी विशेषताएं प्रदान नहीं करती हैं।

Question 3

मुझे लगता है कि मॉडल को गतिशील रूप से बदलने का एक बेहतर तरीका है। उदाहरण के लिए, यदि आप जावास्क्रिप्ट का उपयोग कर रहे हैं:

model['items'][ model['items'].length - 1 ].last = true;

और अपने टेम्पलेट में, उलटे अनुभाग का उपयोग करें:

{{#items}}
    {{name}}{{^last}}, {{/last}}
{{/items}}

उस अल्पविराम को प्रस्तुत करना।

Question 4

धोखा और सीएसएस का उपयोग करें।

यदि आपका मॉडल है:

{
  "items": [
    {"name": "red"},
    {"name": "green"},
    {"name": "blue"}
  ]
}

फिर अपना टेम्प्लेट बनाएं

<div id="someContainer">
{{#items}}
    <span>{{name}}<span>
{{/items}}
</div>

और थोड़ी सीएसएस जोड़ें

#someContainer span:not(:last-of-type)::after {
  content: ", "    
}

मैं अनुमान लगा रहा हूं कि कोई कहेगा कि यह प्रस्तुति में मार्कअप डालने का एक बुरा मामला है, लेकिन मुझे नहीं लगता कि यह है। कॉमा को अलग करने वाले मूल्य अंतर्निहित डेटा की व्याख्या करना आसान बनाने के लिए एक प्रस्तुति निर्णय है। यह प्रविष्टियों पर फ़ॉन्ट रंग को बदलने के समान है।

Question 5

यदि आप jmustache का उपयोग करते हैं , तो आप विशेष -firstया -lastचर का उपयोग कर सकते हैं :

{{#items}}{{name}}{{^-last}}, {{/-last}}{{/items}}

Question 6

मैं कई स्थितियों के बारे में सोच नहीं कर सकते तुम कहाँ आइटम एक के बाहर के एक अज्ञात संख्या सूची करना चाहते हैं <ul>या <ol>, लेकिन यह तुम कैसे करते होता है:

<p>
    Comma separated list, in sentence form;
    {{#each test}}{{#if @index}}, {{/if}}{{.}}{{/each}};
    sentence continued.
</p>

…उत्पादन करेंगे:

Command separated list, in sentence form; asdf1, asdf2, asdf3; sentence continued.

यह हैंडलबार है, आपको बुरा लगता है। @indexकाम करेगा अगर testएक ऐरे है।

Question 7

इस सवाल का कि क्या मूंछें ऐसा करने का एक सुरुचिपूर्ण तरीका प्रस्तुत करती हैं, इसका उत्तर दिया गया है, लेकिन मेरे साथ ऐसा हुआ है कि ऐसा करने का सबसे सुरुचिपूर्ण तरीका मॉडल को बदलने के बजाय CSS का उपयोग करना हो सकता है।

टेम्पलेट:

<ul class="csl">{{#items}}<li>{{name}}</li>{{/items}}</ul>

सीएसएस:

.csl li
{
    display: inline;
}
.csl li:before
{
    content: ", "
}
.csl li:first-child:before
{
    content: ""
}

यह IE8 + और अन्य आधुनिक ब्राउज़रों में काम करता है।

Question 8

मूंछों में ऐसा करने का कोई अंतर्निहित तरीका नहीं है। आपको इसका समर्थन करने के लिए अपने मॉडल को बदलना होगा।

टेम्प्लेट में इसे लागू करने का एक तरीका उल्टे चयन टोपी {{^last}} {{/last}}टैग का उपयोग करना है । यह केवल सूची में अंतिम आइटम के लिए पाठ को छोड़ देगा ।

{{#items}}
    {{name}}{{^last}}, {{/last}}
{{/items}}

या आप ", "ऑब्जेक्ट के रूप में सीमांकक स्ट्रिंग जोड़ सकते हैं , या आदर्श रूप से बेस क्लास यदि आप उस भाषा का उपयोग कर रहे हैं जिसमें वंशानुक्रम है, तो " "इस तरह के अंतिम तत्व के लिए एक रिक्त स्ट्रिंग में "सीमांकक" सेट करें:

{{#items}}
    {{name}}{{delimiter}}
{{/items}}

Question 9

JSON डेटा के लिए मेरा सुझाव है:

Mustache.render(template, settings).replace(/,(?=\s*[}\]])/mig,'');

,अंतिम गुण के बाद regexp किसी भी बाएं लटका को हटा देगा ।

यह ,",}" या "," "" स्ट्रिंग मानों को भी हटा देगा , इसलिए सुनिश्चित करें कि आप जानते हैं कि डेटा आपके ईमेल में डाला जाएगा

Question 10

जैसा सवाल है:

अनुगामी अल्पविराम के बिना अल्पविराम से अलग सूची को व्यक्त करने का एक सुंदर तरीका है?

फिर डेटा बदलना - जब अंतिम आइटम पहले से ही निहित है, तो यह सरणी में अंतिम आइटम है - सुरुचिपूर्ण नहीं है।

किसी भी मूंछें टेम्प्लेटिंग भाषा जिसमें सरणी सूचक हैं यह ठीक से कर सकते हैं,। अर्थात। डेटा में कुछ भी जोड़े बिना । इसमें हैंडलबार, ractive.js, और अन्य लोकप्रिय मूंछ कार्यान्वयन शामिल हैं।

{{# names:index}}
    {{ . }}{{ #if index < names.length - 1 }}, {{ /if }}
{{ / }}

Question 11

सबसे आसान तरीका मुझे सूची प्रस्तुत करना और फिर अंतिम चार निकालना था।

मूंछें मूंछ।
स्ट्रिंग से पहले और बाद में किसी भी सफेद स्थान को हटा दें।
फिर अंतिम चरित्र को हटा दें

letDDData = Mustache रेंडर (dataToRender, data); रेंडरडैट = (रेंडरडैट.ट्रिम ())। सबरिंग (0, रेंडरडैट.लिफ्टिंग -1)

Question 12

हैंडलबार्स का उपयोग करने के मामले में, एक विकल्प है, जो मूंछों की क्षमताओं का विस्तार करता है, आप एक @data चर का उपयोग कर सकते हैं:

{{#if @last}}, {{/if}}

अधिक जानकारी: http://handlebarsjs.com/reference.html#data

Question 13

दिलचस्प। मुझे पता है कि यह एक प्रकार का आलसी है, लेकिन मैं आमतौर पर मान को असाइन करने की बजाय मान असाइनमेंट में टेंपलेट करके इसे प्राप्त करता हूं।

var global.items = {};
{{#items}}
    global.items.{{item_name}} = {{item_value}};
{{/items}}

Question 14

मुझे लगता है कि यह सीएसएस के अनुकूल एक कार्य है (जैसा कि दूसरों द्वारा उत्तर दिया गया है)। हालाँकि, यह मानकर कि आप CSV फ़ाइल का उत्पादन करने का प्रयास कर रहे हैं, आपके पास HTML और CSS आपके लिए उपलब्ध नहीं होंगे। इसके अलावा, यदि आप डेटा को संशोधित करने पर विचार कर रहे हैं, तो यह करने का एक तरीका हो सकता है:

var data = {
  "items": [
    {"name": "red"},
    {"name": "green"},
    {"name": "blue"}
  ]
};

// clone the original data. 
// Not strictly necessary, but sometimes its
// useful to preserve the original object
var model = JSON.parse(JSON.stringify(data));

// extract the values into an array and join 
// the array with commas as the delimiter
model.items = Object.values(model.items).join(',');

var html = Mustache.render("{{items}}", model);

Question 15

यदि आप जावा का उपयोग कर रहे हैं, तो आप निम्नलिखित का उपयोग कर सकते हैं:

https://github.com/spullara/mustache.java/blob/master/compiler/src/test/java/com/github/mustachejava/util/DecoratedCollectionTest.java

MustacheFactory mf = new DefaultMustacheFactory();
Mustache test = mf.compile(new StringReader("{{#test}}{{#first}}[{{/first}}{{^first}}, {{/first}}\"{{value}}\"{{#last}}]{{/last}}{{/test}}"), "test");
StringWriter sw = new StringWriter();
test.execute(sw, new Object() {
    Collection test = new DecoratedCollection(Arrays.asList("one", "two", "three"));
}).flush();
System.out.println(sw.toString());

Question 16

मुझे पता है कि यह एक पुराना सवाल है, लेकिन मैं अभी भी एक जवाब जोड़ना चाहता था जो एक और दृष्टिकोण प्रदान करता है।

मुख्य उत्तर

मूंछें लैम्ब्डा का समर्थन करती हैं, ( प्रलेखन देखें ) तो कोई इसे इस तरह लिख सकता है:

टेम्पलेट:

    {{#removeTrailingComma}}{{#items}}{{name}}, {{/items}}{{/removeTrailingComma}}

हैश:

    {
      "items": [
        {"name": "red"},
        {"name": "green"},
        {"name": "blue"}
      ]
      "removeTrailingComma": function() {
        return function(text, render) {
          var original = render(text);
          return original.substring(0, original.length - 2);
        }
      }
    }

आउटपुट:

लाल, हरा, नीला

टिप्पणी

व्यक्तिगत रूप से, मुझे दूसरों पर यह दृष्टिकोण पसंद है, क्योंकि IMHO मॉडल को केवल यह निर्दिष्ट करना चाहिए कि क्या प्रस्तुत किया गया है और कैसे नहीं इसे प्रस्तुत किया गया है। तकनीकी रूप से, लैम्ब्डा मॉडल का हिस्सा है, लेकिन इरादा बहुत अधिक स्पष्ट है।

मैं अपने स्वयं के OpenApi जनरेटर लिखने के लिए इस दृष्टिकोण का उपयोग करता हूं। वहाँ, मूंछें जावा द्वारा लपेटी जाती हैं, लेकिन कार्यक्षमता बहुत अधिक है। यह वह लम्हा है जो मेरे लिए जैसा दिखता है: (कोटलिन में)

    override fun addMustacheLambdas(): ImmutableMap.Builder<String, Mustache.Lambda> =
        super.addMustacheLambdas()
            .put("lowerCase", Mustache.Lambda { fragment, writer ->
                writer.write(fragment.execute().toLowerCase())
            })
            .put("removeLastComma", Mustache.Lambda { fragment, writer ->
                writer.write(fragment.execute().removeSuffix(","))
            })
            .put("printContext", Mustache.Lambda { fragment, writer ->
                val context = fragment.context()
                println(context) // very useful for debugging if you are not the author of the model
                writer.write(fragment.execute())
            })

Question 17

डायनामिक SQL क्वेरी के साथ काम करते समय, मेरे मामले में मैं उसके लिए कस्टम फ़ंक्शन का उपयोग कर रहा हूं।

    $(document).ready(function () {
    var output = $("#output");    
    var template = $("#test1").html();
    var idx = 0;
    var rows_count = 0;
    var data = {};
    
    data.columns = ["name", "lastname", "email"];
    data.rows  = [
        ["John", "Wick", "john.wick@hotmail.com"],
      ["Donald", "Duck", "donald.duck@ducks.com"],
      ["Anonymous", "Anonymous","jack.kowalski@gmail.com"]
    ];

    data.rows_lines = function() {
        let rows = this.rows;
      let rows_new = [];
      for (let i = 0; i < rows.length; i++) {
        let row = rows[i].map(function(v) {
            return `'${v}'`
        })
                rows_new.push([row.join(",")]);
      }
      rows_count = rows_new.length;
      return rows_new
    }
    data.last = function() {
        return idx++ === rows_count-1; // omit comma for last record
    }
    
    var html = Mustache.render(template, data);
    output.append(html);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/4.0.1/mustache.min.js"></script>
<h2>Mustache example: Generate SQL query (last item support - omit comma for last insert)</h2>

<div id="output"></div>

<script type="text/html" id="test1">
    INSERT INTO Customers({{{columns}}})<br/>
    VALUES<br/>
        {{#rows_lines}}
                ({{{.}}}){{^last}},{{/last}}<br/>
      {{/rows_lines}}
</script>

स्निपेट का विस्तार करें

https://jsfiddle.net/tmdoit/4p5duw70/8/

Question 18

अधिक जटिल परिदृश्यों में, कई कारणों से एक दृश्य मॉडल वांछनीय है। यह मॉडल के डेटा को इस तरीके से प्रदर्शित करता है जो प्रदर्शन के लिए बेहतर है या, इस मामले में, टेम्पलेट प्रसंस्करण।

यदि आप एक दृश्य मॉडल का उपयोग कर रहे हैं, तो आप आसानी से सूचियों का प्रतिनिधित्व कर सकते हैं जो आपके लक्ष्य को सुविधाजनक बनाता है।

नमूना:

{
    name: "Richard",
    numbers: [1, 2, 3]
}

देखें मॉडल:

{
    name: "Richard",
    numbers: [
        { first: true, last: false, value: 1 },
        { first: false, last: false, value: 2 },
        { first: false, last: true, value: 3 }
    ]
}

दूसरी सूची रिप्रेसन टाइप करने के लिए भयानक है, लेकिन कोड से बनाने के लिए बेहद सरल है। अपने मॉडल को व्यू मॉडल में मैप करते समय, बस हर उस सूची को बदलें जिसकी आपको ज़रूरत है firstऔर lastइस प्रतिनिधित्व के साथ।

function annotatedList(values) {
    let result = []
    for (let index = 0; index < values.length; ++index) {
        result.push({
            first: index == 0,
            last: index == values.length - 1,
            value: values[index]
        })
    }
    return result
}

अनबाउंड सूचियों के मामले में, आप केवल सेट firstऔर ओटिट कर सकते हैंlast , क्योंकि उनमें से एक अनुगामी अल्पविराम से बचने के लिए पर्याप्त है।

का उपयोग कर first:

{{#numbers}}{{^first}}, {{/first}}{{value}}{{/numbers}}

का उपयोग कर last:

{{#numbers}}{{value}}{{^last}}, {{/last}}{{/numbers}}