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

JAVASCRIPT / 글쓴이

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

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

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

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

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

답변

콧수염 (완전히 지원)에서 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

답변

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

// 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}}

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

답변

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

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

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

답변

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

{{isActive param}}

그리고보기에서 :

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

답변

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

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

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

답변