Я использую библиотеку шаблонов Mustache и пытаюсь создать список, разделенный запятыми, без конечной запятой, например
красный, зеленый, синий
Создать список с запятой в конце несложно, учитывая структуру
{
"items": [
{"name": "red"},
{"name": "green"},
{"name": "blue"}
]
}
и шаблон
{{#items}}{{name}}, {{/items}}
это разрешит
красный, зеленый, синий,
Однако я не вижу элегантного способа выразить этот случай без конечной запятой. Я всегда могу сгенерировать список в коде, прежде чем передать его в шаблон, но мне было интересно, предлагает ли библиотека альтернативный подход, например, позволяющий определять, является ли это последним элементом в списке в шаблоне.
Ответы:
Хм, сомнительно, демонстрация усов в значительной степени показывает вам, с помощью
first
свойства, что у вас должна быть логика внутри данных JSON, чтобы выяснить, когда ставить запятую.Итак, ваши данные будут выглядеть примерно так:
и ваш шаблон
Я знаю, что это не элегантно, но, как упоминалось другими, Mustache очень легкий и не предоставляет таких функций.
источник
first,second,third
.{"name": "blue", "last": 1}
а затем использовать перевернутый раздел{{#items}} {{name}}{{^last}}, {{/last}} {{/items}}
Я думаю, что лучший способ - это динамическое изменение модели. Например, если вы используете JavaScript:
и в вашем шаблоне используйте перевернутый раздел:
чтобы отобразить эту запятую.
источник
Обманывать и использовать CSS.
Если ваша модель:
затем сделайте свой шаблон
и добавьте немного CSS
Я предполагаю, что кто-то скажет, что это плохой случай использования разметки в презентации, но я не думаю, что это так. Значения с разделением запятыми - это решение, которое необходимо для представления, чтобы упростить интерпретацию базовых данных. Это похоже на изменение цвета шрифта в записях.
источник
Если вы используете jmustache , вы можете использовать специальные
-first
или-last
переменные:источник
{{#something=TEXT}}
)Я не могу придумать много ситуаций, когда вы хотели бы перечислить неизвестное количество элементов вне
<ul>
или<ol>
, но вот как вы это сделаете:… Произведет:
Обратите внимание, это Handlebars.
@index
будет работать, еслиtest
это массив.источник
{{.}}
.На вопрос, предлагает ли Mustache элегантный способ сделать это, был дан ответ, но мне пришло в голову, что наиболее элегантным способом сделать это может быть использование CSS, а не изменение модели.
Шаблон:
CSS:
Это работает в IE8 + и других современных браузерах.
источник
В Mustache нет встроенного способа сделать это. Вы должны изменить свою модель, чтобы поддержать ее.
Один из способов реализовать это в шаблоне - использовать
{{^last}} {{/last}}
тег шляпы перевернутого выделения . Будет пропущен только текст для последнего элемента в списке.Или вы можете добавить строку-разделитель
", "
к объекту или, в идеале, базовый класс, если вы используете язык с наследованием, а затем установить «разделитель» на пустую строку" "
для последнего элемента, например:источник
last
. Затем установите последний элемент в коллекции наlast=true
.config
представление файла в объект python. Я предполагаю, что конфиг вjson
илиxml
, не так ли? Затем, прежде чем передать его шаблонизатору, получите последний элемент коллекции и применитеlast
свойство.Для данных JSON я предлагаю:
Mustache.render(template, settings).replace(/,(?=\s*[}\]])/mig,'');
Регулярное выражение удалит все, что
,
осталось после последних свойств.Это также удалит
,
из строковых значений, содержащих ",}" или ",]", поэтому убедитесь, что вы знаете, какие данные будут помещены в ваш JSON.источник
Поскольку вопрос:
Затем изменение данных - когда последний элемент уже подразумевается, поскольку он является последним элементом в массиве, - не изящно.
Любой язык шаблонов усов, который имеет индексы массивов, может делать это правильно. т.е. ничего не добавляя к данным . Сюда входят handlebars, ractive.js и другие популярные реализации усов.
источник
if
Самый простой способ, который я нашел, - это отобразить список, а затем удалить последний символ.
Затем удалите последний символ
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
:Использование
last
:источник
Если использование Handlebars - это опция, расширяющая возможности Mustache, вы можете использовать переменную @data:
Дополнительная информация: http://handlebarsjs.com/reference.html#data
источник
Интересно. Я знаю, что это немного лениво, но я обычно обхожу это путем создания шаблонов в присвоении значений, а не пытаясь разделять значения запятыми.
источник
Я склонен думать, что эта задача хорошо подходит для CSS (как ответили другие). Однако, предполагая, что вы пытаетесь сделать что-то вроде создания файла CSV, у вас не будет доступных HTML и CSS. Кроме того, если вы все равно планируете изменить данные, чтобы сделать это, это может быть более аккуратный способ сделать это:
источник
Если вы используете java, вы можете использовать следующее:
https://github.com/spullara/mustache.java/blob/master/compiler/src/test/java/com/github/mustachejava/util/DecoratedCollectionTest.java
источник
Я знаю, что это старый вопрос, но я все же хотел добавить ответ, который предлагает другой подход.
Главный ответ
Усы поддерживают лямбды ( см. Документацию ), поэтому их можно написать так:
Шаблон:
Хеш:
Вывод:
Комментарий
Лично мне этот подход нравится больше других, поскольку IMHO модель должна указывать только то, что отображается, а не как это отображается. Технически лямбда является частью модели, но цель гораздо яснее.
Я использую этот подход для написания собственных генераторов OpenApi. Там Mustache обернут Java, но функциональность почти такая же. Вот как для меня выглядит создание лямбд: (в Котлине)
источник
Я использую для этого специальные функции, в моем случае при работе с динамическими 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/
источник