조건부 템플릿

Question

나는 어떤 로직을 dustjs 템플릿에 추가하려고 시도하고 있지만 모두 함께 쓰려고 애를 쓰고있다.

나는 다음과 같은 JSON 코드가 있습니다

{ 
    "names": [{ 
     "name": "User 1", 
     "isSir": true 
    }, { 
     "name": "User 2", 
     "isSir": true 
    }, { 
     "name": "User 3", 
     "isSir": true 
    }, { 
     "name": "User 4", 
     "isSir": false 
    }, { 
     "name": "User 5", 
     "isSir": false 
    }, { 
     "name": "User 6", 
     "isSir": false 
    }] 
} 

내가 다음이를 통해 루프를 원하고, "isSir"각각의 변화를 첫 번째 항목을 표시합니다. 나머지 항목은 CSS로 숨겨집니다, 그래서 보이는 결과가 발생해야한다 같은 :

• 사용자 1 (표시)
• 사용자 2 (숨겨진)
• 사용자 3 () 숨겨진
• 사용자 4 (표시)
• 사용자 5 (숨겨진)
• 사용자 6 (숨겨진)

난 단지 "Sir" 최초로 사람하고 다른 사람을 잡아 {@if cond의 변형을 사용했지만, 나는 또한 수를 유지할 필요가 있기 때문에, 그래서 내가 아는 한 루프가 끝나면 신속하게 {@select key=을 사용하려고합니다.

저는 먼지에 아주 익숙합니다. 그래서 나는 뭔가를 놓치고 있다고 확신합니다.

누구나 내게 이걸 줄 수 있습니까?

Answer 1

먼지는 로직이없는 템플릿 언어 또는 최소한 로직이 적은 템플릿 언어를 의미합니다. 그렇다고 앱이 로직을 가질 수는 없지만 JSON에서 디스플레이 로직을 제공해야한다는 의미는 아닙니다.

문제에 대한 해결책은 현재 JSON과 먼지에 불가능하지만 당신이 당신에게 JSON을 변경하는 경우 :

<ul> 
{#names} 
    <li{?isHidden} class="hidden"{/isHidden}> 
    {?isSir}Sir {/isSir}{name} 
    </li> 
{/names} 
</ul> 

:

{ 
    "names": [{ 
     "name": "User 1", 
     "isSir": true, 
     "isHidden": false 
    }, { 
     "name": "User 2", 
     "isSir": true, 
     "isHidden": true 
    }, { 
     "name": "User 3", 
     "isSir": true, 
     "isHidden": true 
    }, { 
     "name": "User 4", 
     "isSir": false, 
     "isHidden": false 
    }, { 
     "name": "User 5", 
     "isSir": false, 
     "isHidden": true 
    }, { 
     "name": "User 6", 
     "isSir": false, 
     "isHidden": true 
    }] 
} 

그런 다음이 같은 템플릿을 사용할 수 있습니다