mustache.js에서 if / else를 어떻게 달성합니까?

258

콧수염으로 이것을하는 방법을 알 수없는 것이 다소 이상하게 보입니다. 지원됩니까?

이것은 시도하려는 나의 슬픈 시도입니다.

    {{#author}}
      {{#avatar}}
        <img src="{{avatar}}"/>
      {{/avatar}}
      {{#!avatar}}
        <img src="/images/default_avatar.png" height="75" width="75" />
      {{/avatar}}
    {{/author}}

이것은 분명히 옳지 않지만 설명서에는 이와 같은 내용이 언급되어 있지 않습니다. "else"라는 단어는 언급되지 않았습니다.

또한 콧수염은 왜 이런 식으로 설계됩니까? 이런 종류의 일이 나쁜 것으로 간주됩니까? 모델 자체에서 기본값을 설정하도록 강요합니까? 불가능한 경우는 어떻습니까?

javascript templates mustache

— 에거 바리
소스

1

"콧수염은 왜 이런 식으로 디자인 되었습니까?" 나는 확신하지 못하지만 템플릿 언어를 작성하기위한 언어, 즉 변수 비트가가는 구멍이있는 템플릿을 작성하기위한 언어와 같은 템플릿 언어가 있어야한다고 생각합니다. 템플릿 언어에 로직을 넣으면 템플릿이 더 복잡해지며 로직 비트를 처리하기위한 프로그래밍 언어가 이미있는 경우 왜 귀찮습니까?

— Paul D. Waite

4

@ PaulD.Waite "논리리스"는 실제로 "임의가 아닌 코드"를 의미합니다. 템플릿에 비보기 논리를 넣는 것만 큼 코드에 진정한보기 논리를 넣는 것만 큼 나쁩니다. 콧수염은 그것을 달성하기 위해 최소한의 논리를 제공하려고합니다.

— jpmc26

2

또는 콧수염 대신 핸들 바를 사용하십시오. 글을 쓸 수있는 능력 {{#each items}}{{#unless @first}}Output comma before 2nd, 3rd, 4th...{{/unless}}{{/each}}은 예를 들어 더 읽기 쉽고, 더 깔끔하며 여전히 프리젠 테이션입니다. "논리리스 (Logic-less)"는 지침이며, 구속복 일 필요는 없습니다.

— skierpage

OP가 "이것은 나의 슬픈 시도이다 ... 이것은 분명히 옳지 않다"라고 말할 때 다재다능한 템플릿 엔진이 아닐 수도있다. OP 또는 답변에 대한 판단이 없습니다. 방금 온mustache

— 방황

498

콧수염 (완전히 지원)에서 if / else를 수행하는 방법입니다.

{{#repo}}
  <b>{{name}}</b>
{{/repo}}
{{^repo}}
  No repos :(
{{/repo}}

또는 귀하의 경우 :

{{#author}}
  {{#avatar}}
    <img src="{{avatar}}"/>
  {{/avatar}}
  {{^avatar}}
    <img src="/images/default_avatar.png" height="75" width="75" />
  {{/avatar}}
{{/author}}

문서에서 거꾸로 된 섹션을 찾으십시오 : https://github.com/janl/mustache.js

— 에 네코 알론소
소스

88

콧수염 문서는 유쾌합니다. "if 문, else 절 또는 for 루프가 없기 때문에"논리적 "이라고 부릅니다." Yeeeeaaaaaa ....

— 박스 박스

6

@ boxed, 기술적으로 맞습니다. 거꾸로 된 섹션은 태그 값을 확인하는 논리적 인 설명입니다. 그러나 여기서 미묘한 차이는 두 if 문이 하나의 if / else가 아니라 명시 적으로 평가되어야한다는 것입니다. 기본적으로 콧수염은 구조 if (condition){ //do something}뒤에 강제로을 붙 if (!condition){//do something else}입니다. 또한 논리 기반 언어에 비해 논리에서 수행 할 수있는 논리의 양이 크게 줄었습니다. 존재 여부는 유일한 검사입니다. 즉, 태그 값이 5인지 확인한 다음 해당 태그의 코드에 포함되지 않습니다.

— MandM

22

@MandM 맞아 ... 그래서 논리가 있지만 유용한 것은 아무것도 할 수 없다 : P

— 박스

그것은 단지 당신이 다른 논리를 엉망으로 만드는 방법을 유지합니다. 다른 if / else 내부에 많은 if / else가 중첩되어있는 경우 잘못된 디자인의 표시

— Tebe

당신은 (적어도 ngFor 틱 루프) moustache.js와 루프를 위해 할 수있는 @boxed

— codidact.com로 이동 aloisdg

54

이것은 로직리스 템플릿의 요점 인 "컨트롤러"에서 해결하는 것입니다.

// some function that retreived data through ajax
function( view ){

   if ( !view.avatar ) {
      // DEFAULTS can be a global settings object you define elsewhere
      // so that you don't have to maintain these values all over the place
      // in your code.
      view.avatar = DEFAULTS.AVATAR;
   }

   // do template stuff here

}

이것은 실제로 템플릿에서 변경되거나 변경되지 않을 수있는 이미지 URL 또는 기타 미디어를 유지하는 것보다 훨씬 낫지 만 익숙해지는 데 다소 시간이 걸립니다. 요점은 템플릿 터널 비전을 배우고 아바타 템플릿 URL을 다른 템플릿에 사용하도록 바인딩하는 것입니다. X 템플릿 또는 단일 DEFAULTS 설정 객체에서 해당 URL을 유지 하시겠습니까? ;)

다른 옵션은 다음을 수행하는 것입니다.

// augment view
view.hasAvatar = !!view.avatar;
view.noAvatar = !view.avatar;

그리고 템플릿에서 :

{{#hasAvatar}}
    SHOW AVATAR
{{/hasAvatar}}
{{#noAvatar}}
    SHOW DEFAULT
{{/noAvatar}}

그러나 그것은 논리가없는 템플릿의 전체 의미에 위배됩니다. 그것이 당신이하고 싶은 일이라면, 논리적 템플릿을 원하고 콧수염을 사용해서는 안되지만,이 개념을 배울 수있는 공정한 기회를 제공하십시오.)

— BGerrissen
소스

감사. 좋은 반응입니다! 실제로 자바 스크립트 코드의 구조에서 "작업을 수행 할 때"에 대한 다른 구조적 측면에도 도움이되었습니다.

— egervari

이 답변에서 {{/ # hasAvatar}} 및 {{/ # noAvatar}}은 {{/ hasAvatar}} 및 {{/ noAvatar}}이어야합니다.

— Mulhoon

14

귀하의 다른 문 (음과 같아야합니다 ^) :

{{^avatar}}
 ...
{{/avatar}}

콧수염에서 이것을 '거꾸로 된 섹션'이라고합니다.

— 익명
소스

7

#과 ^가 모두 필요하지는 않습니다. 'not'경우에 대해서만 ^입니다

— zappan

최신 버전에서는 작동하지 않습니다. Zappan은 정확합니다. ^

— simonmorley

0

뷰에서 도우미를 정의 할 수 있습니다. 그러나 조건부 논리는 다소 제한적입니다. Moxy-Stencil ( https://github.com/dcmox/moxyscript-stencil )은 "매개 변수화 된"헬퍼를 통해이를 해결하는 것으로 보입니다.

그리고보기에서 :

view.isActive = 함수 (경로 : 문자열) {return path === this.path? "class = 'active'": ''}

— 다니엘
소스

0

{{.}}현재 컨텍스트 항목을 렌더링하는 데 사용할 수 있습니다 .

{{#avatar}}{{.}}{{/avatar}}

{{^avatar}}missing{{/avatar}}

— 하프 터
소스