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

Program / 글쓴이

내 개체는 다음과 같습니다.

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

그리고 나는 콧수염 템플릿을 사용하여 다음과 같이 생성하고 싶습니다.

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

하지만 어떻게? 먼저 이것을 이와 같은 것으로 만들어야합니까?

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

답변

이렇게 할 수 있습니다 …

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

답변

오늘 아침에 동일한 문제가 발생했으며 약간의 실험 끝에 {{.}}를 사용하여 배열의 현재 요소를 참조 할 수 있음을 발견했습니다.

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

답변

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

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

반환 :

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

답변

다음은 템플릿에서 다차원 배열을 렌더링하는 예입니다.

예 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

답변

나는 콧수염이 이것을 할 수 있다고 생각하지 않습니다! (놀랍게도) 객체 목록을 반복 한 다음 각 객체의 속성에 액세스 할 수 있지만 단순한 값 목록을 반복하는 것 같지는 않습니다!

따라서 목록을 다음과 같이 변환해야합니다.

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

템플릿은 다음과 같습니다.

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

나에게 이것은 Mustache의 심각한 문제처럼 보입니다. 모든 템플릿 시스템은 간단한 값 목록을 반복 할 수 있어야합니다!

답변