[mustache] Mustache 템플릿에서 후행 쉼표없이 쉼표로 구분 된 목록을 표현하는 우아한 방법이 있습니까?

Program / 글쓴이

Mustache 템플릿 라이브러리를 사용하고 있으며 , 예를 들어 후행 쉼표없이 쉼표로 구분 된 목록을 생성하려고합니다.

빨강, 녹색, 파랑

구조를 고려하면 후행 쉼표로 목록을 만드는 것은 간단합니다.

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

및 템플릿

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

이것은 해결 될 것이다

빨강, 녹색, 파랑,

그러나 나는 뒤에 쉼표없이 케이스를 표현하는 우아한 방법을 볼 수 없습니다. 템플릿에 전달하기 전에 항상 코드에서 목록을 생성 할 수 있지만 라이브러리가 템플릿 내 목록의 마지막 항목인지 여부를 감지 할 수 있도록 허용하는 것과 같은 대체 접근 방식을 제공하는지 궁금합니다.

답변

흠, 의심 스럽지만 콧수염 데모 는 first속성 과 함께 쉼표를 넣을 때를 파악하기 위해 JSON 데이터 내부에 논리가 있어야 함을 거의 보여줍니다 .

따라서 데이터는 다음과 같습니다.

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

및 귀하의 템플릿

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

우아하지는 않지만 다른 사람들이 언급했듯이 Mustache는 매우 가볍고 이러한 기능을 제공하지 않습니다.

답변

더 나은 방법은 모델을 동적으로 변경하는 것입니다. 예를 들어 JavaScript를 사용하는 경우 :

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

템플릿에서 반전 섹션을 사용하십시오. 

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

쉼표를 렌더링합니다.

답변

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: ", "
}

나는 누군가가 이것이 프레젠테이션에 마크 업을 넣는 나쁜 경우라고 말할 것이라고 생각하지만 그렇게 생각하지 않습니다. 값을 구분하는 쉼표는 기본 데이터를 더 쉽게 해석하기위한 프레젠테이션 결정입니다. 항목의 글꼴 색상을 번갈아 가며 바꾸는 것과 유사합니다.

답변

사용 될 일 경우 jmustache을 , 당신은 특별한 사용할 수 있습니다 -first또는 -last변수를 :

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

답변

<ul>또는 외부에 알 수없는 수의 항목을 나열하려는 많은 상황을 생각할 수 없지만 <ol>다음과 같이 할 수 있습니다.

<p>
    Comma separated list, in sentence form;
    {{#each test}}{{#if @index}}, {{/if}}{{.}}{{/each}};
    sentence continued.
</p>

… 생산 :

Command separated list, in sentence form; asdf1, asdf2, asdf3; sentence continued.

이것은 핸들 바입니다. @index가 test배열 이면 작동합니다 .

답변

콧수염이이를위한 우아한 방법을 제공하는지에 대한 질문에 대한 답을 얻었지만이를 수행하는 가장 우아한 방법은 모델을 변경하는 대신 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 + 및 기타 최신 브라우저에서 작동합니다.

답변

Mustache에서는이를 수행하는 기본 제공 방법이 없습니다. 이를 지원하려면 모델을 변경해야합니다.

템플릿에서이를 구현하는 한 가지 방법은 반전 된 선택 모자 {{^last}} {{/last}}태그 를 사용하는 것 입니다. 목록 의 마지막 항목에 대한 텍스트 만 생략 됩니다.

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

또는 ", "개체에 구분자 문자열을 추가 하거나 상속이있는 언어를 사용하는 경우 기본 클래스를 추가 한 다음 다음 " "과 같이 마지막 요소에 대해 “delimiter”를 빈 문자열로 설정할 수 있습니다 .

{{#items}}
    {{name}}{{delimiter}}
{{/items}}