গোঁফের টেম্প্লেটিংয়ে পেছনের কমা ব্যতীত কমা বিচ্ছিন্ন তালিকা প্রকাশের কি সুন্দর উপায় আছে?

Question 1

আমি গোঁফ টেম্প্লেটিং লাইব্রেরি ব্যবহার করছি এবং একটি অনুগামী কমা ব্যতীত কমা বিচ্ছিন্ন তালিকা তৈরি করার চেষ্টা করছি eg

লাল, সবুজ, নীল

কাঠামোটি দিয়ে পেছনের কমা দিয়ে একটি তালিকা তৈরি করা সোজা is

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

এবং টেমপ্লেট

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

এটি সমাধান করবে

লাল, সবুজ, নীল,

তবে আমি পেছনের কমা ব্যতীত কেসটি প্রকাশের মার্জিত উপায় দেখতে পাচ্ছি না। আমি টেমপ্লেটে প্রবেশের আগে এই কোডটি সর্বদা কোডে উত্পন্ন করতে পারি, তবে আমি ভাবছিলাম যে লাইব্রেরিটি কোনও বিকল্প পদ্ধতির প্রস্তাব দেয় যেমন টেমপ্লেটের মধ্যে থাকা কোনও তালিকার এটি শেষ আইটেম কিনা তা সনাক্ত করার জন্য আপনাকে অনুমতি দেয় কিনা wond

Question 2

এইচআরএম, সন্দেহজনকভাবে, গোঁফ ডেমোটি আপনাকে বেশিরভাগ firstসম্পত্তির সাথে দেখায় যে কমাটি কখন রাখবেন তা নির্ধারণ করার জন্য আপনার JSON ডেটার ভিতরে যুক্তি থাকতে হবে।

সুতরাং আপনার ডেটা দেখতে কিছু হবে:

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

প্রতারণা এবং CSS ব্যবহার করুন।

যদি আপনার মডেলটি হয়:

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

গোঁফ এটি করার জন্য একটি মার্জিত উপায়ে প্রস্তাব দেয় কিনা এই প্রশ্নের উত্তর দেওয়া হয়েছে, তবে এটি আমার কাছে ঘটেছিল যে এটি করার সর্বাধিক মার্জিত উপায় হতে পারে মডেলটি পরিবর্তনের পরিবর্তে সিএসএস ব্যবহার করা।

টেমপ্লেট:

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

সিএসএস:

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

এটি আই 8 + এবং অন্যান্য আধুনিক ব্রাউজারগুলিতে কাজ করে।

Question 8

গোঁফে এটি করার কোনও অন্তর্নির্মিত উপায় নেই। এটি সমর্থন করার জন্য আপনাকে আপনার মডেলটি পরিবর্তন করতে হবে।

টেমপ্লেটে এটি প্রয়োগের একটি উপায় হ'ল বিপরীত নির্বাচন হ্যাট {{^last}} {{/last}}ট্যাগ ব্যবহার করা। এটি কেবলমাত্র তালিকার শেষ আইটেমটির পাঠ্য বাদ দিবে ।

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

অথবা আপনি ", "অবজেক্ট হিসাবে ডিলিমিটার স্ট্রিং যুক্ত করতে পারেন , বা আদর্শ শ্রেণি যদি আপনি উত্তরাধিকার সম্বলিত ভাষা " "ব্যবহার করেন তবে শেষ উপাদানটির জন্য একটি ফাঁকা স্ট্রিংয়ের জন্য "ডিলিমিটার" সেট করুন :

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

Question 9

JSON ডেটার জন্য আমি পরামর্শ দিই:

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

Regexp যে কোনও অপসারণ করবে , শেষ বৈশিষ্ট্য পরে বাম ঝুলন্ত ।

এটি ,", values" বা ",]" অব্যাহত স্ট্রিং মানগুলি থেকেও সরিয়ে ফেলবে তাই আপনার জেএসএন-তে কোন ডেটা স্থাপন করা হবে তা নিশ্চিত হয়ে নিন

Question 10

যেমন প্রশ্ন:

পেছনের কমা ব্যতীত কমা বিচ্ছিন্ন তালিকা প্রকাশের কি সুন্দর উপায় আছে?

তারপরে ডেটা পরিবর্তন করা - যখন সর্বশেষ আইটেমটি হ'ল এটি অ্যারের মধ্যে চূড়ান্ত আইটেম হিসাবে ইতিমধ্যে জড়িত - মার্জিত নয়।

অ্যারে সূচকগুলি রয়েছে এমন কোনও গোঁফ টেম্প্লেটিং ভাষা সঠিকভাবে এটি করতে পারে ,. অর্থাত্ ডেটাতে কিছু যোগ না করে । এর মধ্যে হ্যান্ডেলবারস, রেসিটিভ.জেএস এবং অন্যান্য জনপ্রিয় গোঁফ প্রয়োগ রয়েছে।

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

Question 11

আমি খুঁজে পাওয়া সবচেয়ে সহজ উপায় হল তালিকাটি রেন্ডার করা এবং তারপরে শেষ চরটি সরিয়ে ফেলা।

গোঁফ রেন্ডার করুন।
স্ট্রিংয়ের আগে এবং পরে কোনও সাদা স্থান সরান।
তারপরে শেষ চরিত্রটি সরান

যাক রেন্ডারডটা = গোঁফ রেন্ডার (ডেটাটোরেন্ডার, ডেটা); রেন্ডারডেটা = (রেন্ডারডাটা.ট্রিম ()) স্ট্রাস্টিং (0, রেন্ডারডডা.এলনেথ -১)

Question 12

আরও জটিল পরিস্থিতিতে, একটি ভিউ মডেল প্রচুর কারণে কাঙ্ক্ষিত। এটি মডেলটির ডেটা এমনভাবে উপস্থাপন করে যা প্রদর্শনের জন্য আরও উপযুক্ত এবং এই ক্ষেত্রে, টেমপ্লেট প্রক্রিয়াকরণের জন্য।

আপনি যদি কোনও ভিউ মডেল ব্যবহার করছেন তবে আপনি সহজেই এমন উপায়ে তালিকা উপস্থাপন করতে পারেন যা আপনার লক্ষ্যকে সহজ করে দেয়।

মডেল:

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

Question 13

হ্যান্ডলবার্স ব্যবহারের ক্ষেত্রে একটি বিকল্প, যা গোঁফের সক্ষমতা বাড়িয়ে তোলে আপনি @ ডেটা ভেরিয়েবল ব্যবহার করতে পারেন:

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

আরও তথ্য: http://handlebarsjs.com/references.html#data

Question 14

মজাদার. আমি জানি এটি এক ধরণের অলস তবে আমি সাধারণত মূল্য নির্ধারণের চেয়ে মান অ্যাসাইনমেন্টে টেম্পলেট করে এটিকে ঘিরে around

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

Question 15

আমি মনে করি যে এটি সিএসএসের সাথে উপযুক্ত (অন্যেরা উত্তর হিসাবে) উপযুক্ত task তবে, ধরে নিই যে আপনি কোনও সিএসভি ফাইল তৈরির মতো কিছু করার চেষ্টা করছেন, আপনার কাছে এইচটিএমএল এবং সিএসএস নেই। এছাড়াও, যদি আপনি যাইহোক এটি করার জন্য ডেটা সংশোধন করার বিষয়টি বিবেচনা করছেন, এটি এটি করার একটি উত্তম উপায় হতে পারে:

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 16

আপনি যদি জাভা ব্যবহার করেন তবে আপনি নিম্নলিখিতটি ব্যবহার করতে পারেন:

https://github.com/spullara/mustache.java/blob/master/compiler/src/test/java/com/github/mustachejava/util/Decorated CollectionsTest.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 17

আমি জানি এটি একটি পুরানো প্রশ্ন, তবে আমি এখনও একটি উত্তর যুক্ত করতে চেয়েছিলাম যা অন্য পদ্ধতির সরবরাহ করে।

প্রধান উত্তর

গোঁফ ল্যাম্বডাসকে সমর্থন করে, ( ডকুমেন্টেশন দেখুন) ) যাতে কেউ এটি এইভাবে লিখতে পারেন:

টেমপ্লেট:

    {{#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);
        }
      }
    }

আউটপুট:

লাল, সবুজ, নীল

ব্যক্তিগতভাবে, আমি অন্যদের চেয়ে এই পদ্ধতির পছন্দ করি, যেহেতু আইএমএইচও মডেলটির কেবলমাত্র রেন্ডার করা হয় তা নির্দিষ্ট করা উচিত এবং কীভাবে এটি রেন্ডার করা হয় তা নয় । প্রযুক্তিগতভাবে, ল্যাম্বডা মডেলের অংশ, তবে অভিপ্রায়টি আরও স্পষ্ট।

আমি আমার নিজের ওপেনএপিআই জেনারেটর লেখার জন্য এই পদ্ধতিটি ব্যবহার করি। সেখানে, গোঁফ জাভা দ্বারা মোড়ানো, তবে কার্যকারিতা বেশ একই রকম। ল্যাম্বডাস তৈরি করা আমার কাছে দেখতে এটির মতো: (কোটলিনে)

    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 18

ডায়ামিক এসকিউএল কোয়েরি নিয়ে কাজ করার ক্ষেত্রে আমার ক্ষেত্রে কাস্টম ফাংশন ব্যবহার করছি।

    $(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/

গোঁফের টেম্প্লেটিংয়ে পেছনের কমা ব্যতীত কমা বিচ্ছিন্ন তালিকা প্রকাশের কি সুন্দর উপায় আছে?

প্রধান উত্তর

মন্তব্য