Cách tốt hơn để ucfirst trong một mẫu Jade?

Question

Có cách nào tốt hơn để tận dụng ký tự đầu tiên của một chuỗi trong Ngọc bích không?

for list in project.lists 
    - list.name = list.name.charAt(0).toUpperCase() + list.name.slice(1); 
    li #{list.name} 

Việc làm này mỗi khi tôi muốn tận dụng một biến là xấu xí, có cách nào ở Jade mà tôi có thể xác định một chức năng tùy chỉnh mà tôi có trên mỗi mẫu như:

for list in project.lists 
    li #{ucfirst(list.name)} 

Cảm ơn trước!

Answer 1

Nội dung của #{} được thực thi dưới dạng JS chuẩn, vì vậy bạn có thể chuyển các hàm trợ giúp để sử dụng với những thứ như thế. Bạn chưa xác định, nhưng giả sử bạn đang sử dụng Jade cùng với Express, bạn có thể làm một cái gì đó như thế này:

app.locals.ucfirst = function(value){ 
    return value.charAt(0).toUpperCase() + value.slice(1); 
}; 

Điều đó sẽ phơi bày một hàm gọi là ucfirst bên trong mẫu Jade. Bạn cũng có thể chuyển nó thành một phần của locals mỗi khi bạn kết xuất, nhưng nếu bạn đang sử dụng Express, nó sẽ tự động thực hiện.

Answer 2

Nếu bạn sẵn sàng sử dụng CSS, bạn có thể tạo lớp học viết hoa chữ cái đầu tiên của mỗi từ trong phần tử đích.

CSS

.caps { 
    text-transform: capitalize; 
} 

Jade

div.caps 
    each foo in ['one', 'two', 'three'] 
     span #{foo} 

Kết quả HTML

<div class="caps"><span>one</span><span>two</span><span>three</span> 

Kết quả xem

012.

One Two Three 

Answer 3

Nếu bạn đang sử dụng pug với ngụm, điều này có thể hữu ích:

mixin ucfirst(text) 
    - text = text.charAt(0).toUpperCase() + text.slice(1); 
    . 
     #{text} 

Đơn giản chỉ cần gọi này như bất kỳ mixin khác:

li 
    +ucfirst(list.name)