Я использую библиотеку шаблонов Mustache и пытаюсь создать список, разделенный запятыми, без конечной запятой, например

красный, зеленый, синий

Создать список с запятой в конце несложно, учитывая структуру

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

и шаблон

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

это разрешит

красный, зеленый, синий,

Однако я не вижу элегантного способа выразить этот случай без конечной запятой. Я всегда могу сгенерировать список в коде, прежде чем передать его в шаблон, но мне было интересно, предлагает ли библиотека альтернативный подход, например, позволяющий определять, является ли это последним элементом в списке в шаблоне.

Хм, сомнительно, демонстрация усов в значительной степени показывает вам, с помощью firstсвойства, что у вас должна быть логика внутри данных JSON, чтобы выяснить, когда ставить запятую.

Итак, ваши данные будут выглядеть примерно так:

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

и ваш шаблон

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

Я знаю, что это не элегантно, но, как упоминалось другими, Mustache очень легкий и не предоставляет таких функций.

Я думаю, что лучший способ - это динамическое изменение модели. Например, если вы используете JavaScript:

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

и в вашем шаблоне используйте перевернутый раздел:

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

чтобы отобразить эту запятую.

Обманывать и использовать CSS.

Если ваша модель:

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

затем сделайте свой шаблон

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

и добавьте немного CSS

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

Я предполагаю, что кто-то скажет, что это плохой случай использования разметки в презентации, но я не думаю, что это так. Значения с разделением запятыми - это решение, которое необходимо для представления, чтобы упростить интерпретацию базовых данных. Это похоже на изменение цвета шрифта в записях.

Если вы используете jmustache , вы можете использовать специальные -firstили -lastпеременные:

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

Я не могу придумать много ситуаций, когда вы хотели бы перечислить неизвестное количество элементов вне <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.

Обратите внимание, это Handlebars. @indexбудет работать, если testэто массив.

На вопрос, предлагает ли Mustache элегантный способ сделать это, был дан ответ, но мне пришло в голову, что наиболее элегантным способом сделать это может быть использование CSS, а не изменение модели.

Шаблон:

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

CSS:

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

Это работает в IE8 + и других современных браузерах.

В Mustache нет встроенного способа сделать это. Вы должны изменить свою модель, чтобы поддержать ее.

Один из способов реализовать это в шаблоне - использовать {{^last}} {{/last}}тег шляпы перевернутого выделения . Будет пропущен только текст для последнего элемента в списке.

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

Или вы можете добавить строку-разделитель ", "к объекту или, в идеале, базовый класс, если вы используете язык с наследованием, а затем установить «разделитель» на пустую строку " "для последнего элемента, например:

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

Для данных JSON я предлагаю:

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

Регулярное выражение удалит все, что ,осталось после последних свойств.

Это также удалит ,из строковых значений, содержащих ",}" или ",]", поэтому убедитесь, что вы знаете, какие данные будут помещены в ваш JSON.

Поскольку вопрос:

есть ли элегантный способ выразить список, разделенный запятыми, без запятой?

Затем изменение данных - когда последний элемент уже подразумевается, поскольку он является последним элементом в массиве, - не изящно.

Любой язык шаблонов усов, который имеет индексы массивов, может делать это правильно. т.е. ничего не добавляя к данным . Сюда входят handlebars, ractive.js и другие популярные реализации усов.

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

Самый простой способ, который я нашел, - это отобразить список, а затем удалить последний символ.

1. Сделайте усы.
2. Удалите все пробелы до и после строки.

3. Затем удалите последний символ

   let renderedData = Moustache Render (dataToRender, данные); renderedData = (renderedData.trim ()). substring (0, renderedData.length-1)

В более сложных сценариях модель представления желательна по множеству причин. Он представляет данные модели таким образом, который лучше подходит для отображения или, в данном случае, обработки шаблона.

Если вы используете модель представления, вы можете легко представлять списки таким образом, чтобы облегчить достижение вашей цели.

Модель:

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

Если использование Handlebars - это опция, расширяющая возможности Mustache, вы можете использовать переменную @data:

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

Дополнительная информация: http://handlebarsjs.com/reference.html#data

Интересно. Я знаю, что это немного лениво, но я обычно обхожу это путем создания шаблонов в присвоении значений, а не пытаясь разделять значения запятыми.

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

Я склонен думать, что эта задача хорошо подходит для CSS (как ответили другие). Однако, предполагая, что вы пытаетесь сделать что-то вроде создания файла 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);

Если вы используете java, вы можете использовать следующее:

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());

Я знаю, что это старый вопрос, но я все же хотел добавить ответ, который предлагает другой подход.

Главный ответ

Усы поддерживают лямбды ( см. Документацию ), поэтому их можно написать так:

Шаблон:

    {{#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. Там Mustache обернут Java, но функциональность почти такая же. Вот как для меня выглядит создание лямбд: (в Котлине)

    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())
            })

Я использую для этого специальные функции, в моем случае при работе с динамическими 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/