Tự động đặt thuộc tính CSS dựa trên giá trị mẫu

Question

Có thể tự động đặt màu văn bản của trường nhập dựa trên giá trị mẫu handlebars.js không?

Tôi ban đầu tạo ra html của tôi sử dụng mẫu này:

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

đâu projects là một đối tượng đọc từ một db. Html kết quả (những gì được kết xuất trên trang không phải những gì là trong html của tôi) cho mỗi project trông giống như sau:

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

Tôi muốn để render html này với màu sắc của văn bản & NOTOK OK thiết lập tự động .

Tôi đã có một hàm helper tay lái mà sẽ trở thành công mã màu chính xác dựa trên mỗi tùy chọn và tôi có thể gọi đây là cách sử dụng:

{{getStatusColor currentStatus}} 

Những gì tôi muốn làm là đặt cuộc gọi chức năng này trực tiếp vào bản thân css, hơi giống như:

font-color: {{getStatusColor currentStatus}} 

Nhưng rõ ràng điều này không hiệu quả. Chức năng này có cảm giác giống như cách tiếp cận đúng nhưng tôi có thể sử dụng nó ở đâu để định dạng văn bản chính xác trên trang?

Answer 1

Trả lời câu hỏi của riêng tôi: Mẫu cần được mở rộng (từ {{> projects}}) để cho phép hiển thị có điều kiện.

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

Để hoàn chỉnh, chức năng helper getStatusColor trông như thế này:

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

UPDATE: Vì lợi ích của sự trung thực, tôi có nên thú nhận tôi hoàn toàn bị mất mà tôi đã có mẫu mở rộng này trong mã của tôi và rằng {{> projects}} đã trỏ đến điều này. Tôi chỉ nên thêm thuộc tính style="color:{{getStatusColor status}}" trực tiếp vào mẫu project được tham chiếu. Vì vậy, nhiều như lợi ích của tôi với người khác, cuối cùng, làm việc, 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>