口ひげはトップレベルの配列を反復できますか?


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

たとえば、配列の2番目の要素を取得するにはどうすればよいですか?mustache.jsで{{.1}}を実行しようとしていますが、機能しません。
thouliha 2015

NM、それを理解しました:ドットは無視できます:したがって、{{1}}または論理チェックを実行する場合は、{{#1}}何でも{{/ 1}}
thouliha

8
これらの機能はどこかに記載されていますか?私は表示されない{{.}}{{1}}または口ひげ(5)で同様のもの。
Daniel Lubarov、2015

注:トップレベルの配列は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']);
Kai Carver

JavaScriptは次のようになります Mustache.render('<ul>{{#.}}{{.}}{{/.}}</ul>', {yourList: ['foo','bar','baz']});
Dan Jordan

1
読みにくいテンプレートが必要な場合にのみ、これを行ってください。「必須」ではありませんが、受け入れられた答えは、より読みやすいソリューションです。
ティモックスリー

7
この情報がドキュメントに含まれていないのはなぜですか?moustache.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>

それは配列に対してのみ機能し、{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>

私には、これはMoustacheの深刻な問題のようです-どのテンプレートシステムも単純な値のリストをループできるはずです!


4
{{。}}を使用するだけです。以下の私の答えを参照してください。
アンディハル

2
反対票は誤解を招くものです。この答えは正しいです。{{。}}は口ひげの標準の一部ではありませんが、一部の実装ではサポートされています。これを行うポータブルな方法はありません。
Yefu

これは正しく、多次元レンダリングに非常に役立ちます。以下のように私の例を見つけてください
Bhupender Keswani 2017年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.