콧수염이 최상위 배열을 반복 할 수 있습니까?


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']);
Kai Carver

예를 들어 배열의 두 번째 요소를 어떻게 얻습니까? mustache.js로 {{.1}}을하려고하는데 작동하지 않습니다.
thouliha

NM은 알아 냈습니다. 점은 무시해도됩니다. 따라서 {{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 변수의 이름은 어디에서 왔습니까? 실제 렌더링의 자바 스크립트 샘플을 보여줄 수 있습니까?
iwein

3
"yourList"를 사용할 필요도 없습니다. "."만 사용할 수 있습니다. 여기 너무 : Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>',['foo','bar','baz']);
카이 카버

JavaScript는 다음과 같습니다 Mustache.render('<ul>{{#.}}{{.}}{{/.}}</ul>', {yourList: ['foo','bar','baz']});
Dan Jordan

1
읽기 어려운 템플릿을 원하는 경우에만이 작업을 수행하십시오. "필수"는 아니지만 허용되는 대답은 더 읽기 쉬운 솔루션입니다.
timoxley

7
이 정보가 문서에없는 이유를 아는 사람이 있습니까? mustache.github.io/mustache.5.html
Josh

5

@danjordan의 답변을 기반으로하면 원하는 작업을 수행 할 수 있습니다.

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

반환 :

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

그것은 objcts가 아닌 배열에서만 작동합니다. {a:'foo',b:'bar',c:'baz'}객체를 반복 할 때 익명 참조를 수행하는 방법은 무엇입니까?
Peter Krauss

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
{{.}} 만 사용하면됩니다. 아래 내 대답을 참조하십시오.
Andy Hull 2011

2
반대표는 오해의 소지가 있습니다. 이 답변은 {{.}}이 일부 구현에서 지원되지만 콧수염 표준의 일부가 아니라는 점에서 정확합니다. 이를 수행하는 휴대용 방법은 없습니다.
Yefu

이것은 옳고 다차원 렌더링에 매우 유용합니다. 아래로 내 예를 찾아주세요
Bhupender Keswani
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.