Может ли mustache перебирать массив верхнего уровня?


109

Мой объект выглядит так:

['foo','bar','baz']

И я хочу использовать шаблон усов, чтобы получить из него что-то вроде этого:

"<ul><li>foo</li><li>bar</li><li>baz</li></ul>"

Но как? Неужели я действительно должен сначала сделать что-то вроде этого?

{list:['foo','bar','baz']}

Ответы:


169

Вы можете сделать это так ...

Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>', ['foo','bar','baz']);

Это также работает для таких вещей ...

var obj = [{name: 'foo'}, {name: 'bar'}];
var tmp = '<ul>{{#.}}<li>{{name}}</li>{{/.}}</ul>';
Mustache.render(tmp, obj);

2
на самом деле шаблон идет первым: Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>',['foo','bar','baz']);
Кай Карвер

Как получить, например, 2-й элемент массива? Я пытаюсь сделать {{.1}} с mustache.js, но он не работает.
thouliha

НМ, понял: вы можете просто игнорировать точки: так что {{1}} или, если вы хотите провести логическую проверку, тогда {{# 1}} что угодно {{/ 1}}
thouliha

8
Эти функции где-то задокументированы? Не вижу {{.}}, {{1}}или ничего похожего в усах (5).
Daniel Lubarov

Примечание: массив верхнего уровня не поддерживается Hogan: github.com/twitter/hogan.js/issues/74 . Используйте решение со свойством: stackoverflow.com/a/8360440/470117
mems

115

У меня была такая же проблема сегодня утром, и после небольшого эксперимента я обнаружил, что вы можете использовать {{.}} Для ссылки на текущий элемент массива:

<ul>
  {{#yourList}}
  <li>{{.}}</li>
  {{/yourList}}
</ul>

1
Откуда взялось имя переменной #yourList? Можете ли вы показать образец фактического рендеринга на javascript?
iwein

3
вам даже не нужно использовать yourList, вы можете просто использовать "." здесь тоже: Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>',['foo','bar','baz']);
Кай Карвер

JavaScript будет Mustache.render('<ul>{{#.}}{{.}}{{/.}}</ul>', {yourList: ['foo','bar','baz']});
Дэн Джордан

1
Обратите внимание: делайте это только в том случае, если вам нужны менее читаемые шаблоны. Принятый ответ, хотя и не «обязательный», является более читаемым решением.
Timoxley

7
Кто-нибудь знает, почему эта информация отсутствует в документации? mustache.github.io/mustache.5.html
Джош

5

Основываясь на ответе @danjordan, это будет делать то, что вы хотите:

Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>',['foo','bar','baz']);

возвращение:

<ul><li>foo</li><li>bar</li><li>baz</li></ul>

Это работает только для массивов, а не для объектов, невозможно для {a:'foo',b:'bar',c:'baz'}... Как делать анонимные ссылки при итерации по объектам?
Питер Краусс

1

Ниже приведены примеры визуализации многомерного массива в шаблоне:

Пример 1

'use strict';

var Mustache = require('mustache');

var view = {test: 'div content', multiple : ['foo', 'bar'], multiple_2 : ['hello', 'world']};
var template = '<div>{{test}}</div><ul>{{#multiple}}<li>{{.}}</li>{{/multiple}}</ul><ul>{{#multiple_2}}<li>{{.}}</li>{{/multiple_2}}</ul>';

var output = Mustache.render(template, view);

console.log(output);

Пример 2

'use strict';

var Mustache = require('mustache');

var view = {test: 'div content', multiple : [{name: 'foo', gender: 'male'}, {name: 'bar', gender: 'female'}], multiple_2 : [{text: 'Hello', append: '**', prepend: '**'}, {text: 'World', append: '**', prepend: '**'}]};
var template = '<div>{{test}}</div><ul>{{#multiple}}<li>Hello my name is {{name}}. And I am {{gender}}</li>{{/multiple}}</ul><ul>{{#multiple_2}}<li>{{prepend}}_{{text}}_{{append}}</li>{{/multiple_2}}</ul>';

var output = Mustache.render(template, view);

console.log(output);

Для тестового запуска сохраните приведенные выше примеры в файле с именем test.js, выполните следующую команду в командной строке

nodejs test.js

-1

Не думаю, что усы на это способны! (удивительно) Вы можете перебирать список объектов, а затем обращаться к атрибутам каждого объекта, но вы не можете перебирать простой список значений!

Итак, вам нужно преобразовать свой список в:

[ {"value":"foo"},{"value":"bar"},{"value":"baz"} ] 

и тогда ваш шаблон будет:

<ul>
  {{#the_list}}
  <li>{{value}}</li>
  {{/the_list}}
</ul>

Мне это кажется серьезной проблемой с Mustache - любая система шаблонов должна иметь возможность перебирать список простых значений!


4
Вам просто нужно использовать {{.}}. Смотрите мой ответ ниже.
Энди Халл

2
Голоса против вводят в заблуждение. Этот ответ верен в том смысле, что {{.}} Не является частью стандарта усов, хотя он поддерживается некоторыми реализациями. Нет портативного способа сделать это.
Yefu

этот правильный и очень полезен для многомерного рендеринга. Пожалуйста, найдите мой пример, как
показано
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.