95

Mustache テンプレート ライブラリを使用しており、コンマ区切りのリストを末尾のコンマなしで生成しようとしています。

赤、緑、青

構造を考えると、末尾のコンマを使用してリストを作成するのは簡単です

{
  "items": [
    {"name": "red"},
    {"name": "green"},
    {"name": "blue"}
  ]
}

そしてテンプレート

{{#items}}{{name}}, {{/items}}

これは次のように解決されます

赤、緑、青、

ただし、末尾のコンマがないと、ケースをエレガントに表現する方法がわかりません。テンプレートに渡す前に常にコードでリストを生成できますが、ライブラリがテンプレート内のリストの最後の項目であるかどうかを検出できるようにするなどの代替アプローチを提供するかどうか疑問に思っていました。

4

19 に答える 19

102

より良い方法は、モデルを動的に変更することだと思います。たとえば、JavaScript を使用している場合:

model['items'][ model['items'].length - 1 ].last = true;

テンプレートでは、反転セクションを使用します。

{{#items}}
    {{name}}{{^last}}, {{/last}}
{{/items}}

そのコンマをレンダリングします。

于 2011-09-29T02:37:43.817 に答える
46

CSSをごまかして使用します。

モデルが次の場合：

{
  "items": [
    {"name": "red"},
    {"name": "green"},
    {"name": "blue"}
  ]
}

次に、テンプレートを作成します

<div id="someContainer">
{{#items}}
    <span>{{name}}<span>
{{/items}}
</div>

CSSを少し追加します

#someContainer span:not(:last-of-type)::after {
  content: ", "    
}

これはプレゼンテーションにマークアップを入れるのは悪いケースだと誰かが言うだろうと思いますが、そうではないと思います。値を区切るコンマは、基になるデータの解釈を容易にするためのプレゼンテーションの決定です。これは、エントリのフォントの色を変えるのと似ています。

于 2012-09-14T21:38:17.220 に答える
46

うーん、疑わしいですが、口ひげのデモfirstは、コンマをいつ配置するかを判断するために JSON データ内にロジックが必要であることをプロパティで示しています。

したがって、データは次のようになります。

{
  "items": [
    {"name": "red", "comma": true},
    {"name": "green", "comma": true},
    {"name": "blue"}
  ]
}

そしてあなたのテンプレート

{{#items}}
    {{name}}{{#comma}},{{/comma}}
{{/items}}

エレガントではないことはわかっていますが、他の人が述べたように、 Mustache は非常に軽量であり、そのような機能は提供していません。

于 2011-05-25T16:54:08.460 に答える
7

Mustache には、これを行う組み込みの方法はありません。それをサポートするには、モデルを変更する必要があります。

これをテンプレートに実装する 1 つの方法は、逆選択ハット{{^last}} {{/last}}タグを使用することです。リストの最後の項目のテキストのみが省略されます。

{{#items}}
    {{name}}{{^last}}, {{/last}}
{{/items}}

または、オブジェクトに区切り文字列を追加する", "か、継承のある言語を使用している場合は理想的には基本クラスに追加し、次" "のように最後の要素の「区切り文字」を空の文字列に設定します。

{{#items}}
    {{name}}{{delimiter}}
{{/items}}
于 2015-07-14T00:47:11.970 に答える
6

Mustache がこれを行うためのエレガントな方法を提供しているかどうかという質問には答えがありましたが、これを行う最もエレガントな方法は、モデルを変更するのではなく、CSS を使用することではないかと思いました。

テンプレート：

<ul class="csl">{{#items}}<li>{{name}}</li>{{/items}}</ul>

CSS:

.csl li
{
    display: inline;
}
.csl li:before
{
    content: ", "
}
.csl li:first-child:before
{
    content: ""
}

これは、IE8+ およびその他の最新のブラウザーで機能します。

于 2012-08-08T15:28:39.463 に答える
2

質問は次のとおりです。

末尾のコンマなしでコンマ区切りのリストを表現するエレガントな方法はありますか?

次に、データを変更する - 最後のアイテムであることは、配列の最後のアイテムであることによってすでに暗示されている場合 - エレガントではありません。

配列インデックスを持つ口ひげテンプレート言語は、これを適切に行うことができます。すなわち。 データに何も追加せずに。これには、ハンドルバー、ractive.js、およびその他の一般的な口ひげの実装が含まれます。

{{# names:index}}
    {{ . }}{{ #if index < names.length - 1 }}, {{ /if }}
{{ / }}
于 2016-04-12T16:55:57.947 に答える
0

面白い。私はそれが一種の怠惰であることを知っていますが、通常、値をコンマで区切ろうとするのではなく、値の割り当てをテンプレート化することでこれを回避します。

var global.items = {};
{{#items}}
    global.items.{{item_name}} = {{item_value}};
{{/items}}
于 2012-05-21T17:16:55.863 に答える
0

Java を使用している場合は、次を使用できます。

https://github.com/spullara/mustache.java/blob/master/compiler/src/test/java/com/github/mustachejava/util/DecoratedCollectionTest.java

MustacheFactory mf = new DefaultMustacheFactory();
Mustache test = mf.compile(new StringReader("{{#test}}{{#first}}[{{/first}}{{^first}}, {{/first}}\"{{value}}\"{{#last}}]{{/last}}{{/test}}"), "test");
StringWriter sw = new StringWriter();
test.execute(sw, new Object() {
    Collection test = new DecoratedCollection(Arrays.asList("one", "two", "three"));
}).flush();
System.out.println(sw.toString());
于 2017-10-07T01:01:05.153 に答える
0

これはCSSに適したタスクだと思う傾向があります（他の人が答えたように）。ただし、CSV ファイルの生成などを行おうとすると、HTML と CSS を利用できなくなります。また、とにかくこれを行うためにデータを変更することを検討している場合、これはそれを行うためのよりきちんとした方法かもしれません:

var data = {
  "items": [
    {"name": "red"},
    {"name": "green"},
    {"name": "blue"}
  ]
};

// clone the original data. 
// Not strictly necessary, but sometimes its
// useful to preserve the original object
var model = JSON.parse(JSON.stringify(data));

// extract the values into an array and join 
// the array with commas as the delimiter
model.items = Object.values(model.items).join(',');

var html = Mustache.render("{{items}}", model);
于 2016-09-17T22:12:08.937 に答える