템플릿 값을 기반으로 CSS 속성을 동적으로 설정합니다.

Question

handlebars.js 템플릿 값을 기반으로 입력 필드의 텍스트 색상을 동적으로 설정할 수 있습니까?

나는 처음에이 템플릿을 사용하여 내 HTML을 만드는 오전 : projects은 DB에서 읽어 객체입니다

<div class="board"> 
    <div class="header"> 
     <span class="name">Project</span> 
     <span class="status">Status</span> 
    </div> 
    {{#each projects}} 
    {{> project}} 
    {{/each}} 
</div> 

합니다.

<div class="project"> 
    <span class="name">FOO</span> 
    <span class="status">OK</span> 
</div> 
<div class="project"> 
    <span class="name">BAR</span> 
    <span class="status">NOTOK</span> 
</div> 

내가 동적으로 설정 확인 & NOTOK 텍스트의 색상이 HTML 렌더링하려는 각 project에 대한 (내 HTML에없는 어떤 페이지에 렌더링됩니다 어떤) 결과 HTML은 다음과 같이 보입니다 .

이미 성공적으로 각 옵션에 따라 올바른 색상 코드를 반환하는 핸들 도우미 기능을 가지고 있고 사용이 호출 할 수 있습니다

{{getStatusColor currentStatus}} 

내가 직접이 함수 호출을 넣어하고 싶으면 무엇 CSS 자체, 조금 같은 :

font-color: {{getStatusColor currentStatus}} 

분명히 이것은 작동하지 않습니다. 이 함수는 올바른 접근 방식이라고 생각하지만 어디에서 페이지의 텍스트를 올바르게 포맷 할 수 있습니까?

Answer 1

내 질문에 답하기 : 조건부 렌더링을 위해 템플릿을 확장해야했습니다 ({{> projects}}). 완성도를 들어

<div class="board"> 
    <div class="header"> 
     <span class="name">Project</span> 
     <span class="status">Status</span> 
    </div> 
    {{#each projects}} 
    <div class="project"> 
     <span class="name">{{name}}</span> 
     <span class="status" style="color:{{getStatusColor status}}">{{status}}</span> 
    </div> 
    {{/each}} 
</div> 

는 도우미 함수 getStatusColor는 다음과 같습니다

Handlebars.registerHelper('getStatusColor', function(status) { 
    switch (status) { 
     case "GOOD" : { 
      return 'green'; 
     } 
     break; 
     case "BAD" : { 
      return 'red'; 
     } 
     break; 
     default : { 
     ...etc.; 
    } 
}); 

UPDATE : 정직의 이익에 , 나는 내가 완전히 이미 내 코드에서이 확장 템플릿을 한 것으로 놓친 고백한다 그리고 그 {{> projects}} 가리키는 것이었다. 방금 속성을 참조 된 project 템플릿에 직접 추가해야합니다. 그래서 다른 사람들과 마찬가지로 제 최종적인, 일하는, HTML :

<template name="foo"> 
    <div class="board"> 
    <div class="header"> 
     <span class="name">Project</span> 
     <span class="status">Status</span> 
    </div> 
    {{#each projects}} 
    {{> project}} 
    {{/each}} 
    </div> 
</template> 

<template name="project"> 
    <div class="project {{selected}}"> 
     <span class="name">{{name}}</span> 
     <span class="status"style="color:{{getStatusColor status}}">{{status}}</span> 
    </div> 
</template>