Jade Inline Có điều kiện

Question

Tôi đang cố gắng để làm mọi thứ ngoài yếu tố đầu tiên trong một mảng có lớp CSS sử dụng công cụ tô hoa Ngọc.

Tôi đã hy vọng tôi có thể làm điều đó như thế này, nhưng không may mắn. Bất kỳ đề xuất?

- each sense, i in entry.senses 
    div(class="span13 #{ if (i != 0) 'offset3' }") 
    ... a tonne of subsequent stuff 

Tôi biết tôi có thể bọc mã như sau, nhưng theo như tôi hiểu quy tắc làm tổ của Jade để làm việc, tôi phải lặp lại mã hoặc giải nén nó vào Mixin hoặc gì đó.

- each sense, i in entry.senses 
    - if (i == 0) 
    .span13 
     ... a tonne of subsequent stuff 
    - else 
    .span13.offset3 
     ... identical subsequent stuff 

Có cách nào tốt hơn để làm việc này không?

Answer 1

Bạn có thể làm điều này thay vì:

- each sense, i in entry.senses 
    - var klass = (i === 0 ? 'span13' : 'span13 offset3') 
    div(class=klass) 
    ... a tonne of subsequent stuff 

Answer 2

này hoạt động quá:

div(class="#{i===0 ? 'span13' : 'span13 offset3'}") 

Answer 3

Đây là giải pháp của tôi. Tôi đang sử dụng một mixin để vượt qua con đường hoạt động hiện tại và trong mixin tôi xác định trình đơn hoàn chỉnh và luôn luôn vượt qua một nếu để kiểm tra nếu đường dẫn là đường dẫn hoạt động.

mixin adminmenu(active) 
    ul.nav.nav-list.well 
    li.nav-header Hello 
    li(class="#{active=='/admin' ? 'active' : ''}") 
     a(href="/admin") Admin 

Answer 4

này cũng hoạt động:

div(class=(i===0 ? 'span13' : 'span13 offset3')) 

Answer 5

Bạn có thể sử dụng, không chỉ class, nhưng một loạt các thuộc tính trong một cách có điều kiện:

- each sense, i in entry.senses 
    - var attrs = i === 0 ? {'disabled': 'true'} : {'class': '100', 'ng-model': 'vm.model.name', 'ng-click': 'vm.click()'} 
    div&attributes(attrs) 

Answer 6

Tôi thích sử dụng các chức năng đơn giản để kiểm tra bất kỳ điều kiện phức tạp nào. Nó hoạt động hoàn hảo và nhanh chóng, bạn không nên viết dòng dài trong mẫu. có thể thay thế này

- each sense, i in entry.senses 
    - var klass = (i === 0 ? 'span13' : 'span13 offset3') 
    div(class=klass) 
    ... a tonne of subsequent stuff 

này

-function resultClass(condition) 
-if (condition===0) 
    -return 'span13' 
-else if (condition===1) 
    -return 'span13 offset3' 
-else if (condition===2) //-any other cases can be implemented 
    -return 'span13 offset3' 
-else 
    -return 'span13 offset3' 

- each sense, i in entry.senses 
    div(class=resultClass(i)) 
    ... a tonne of subsequent stuff 

Hy vọng nó giúp và ý tưởng rõ ràng để hiểu.

Ngoài ra nó là thực hành tốt để di chuyển tất cả các chức năng trong bao gồm tập tin và chia sẻ nó giữa các mẫu khác nhau, nhưng đó là một câu hỏi

Answer 7

Với pug 2 bạn có thể sử dụng cú pháp sau:

a(href='/', class="link", class={"-active": page === 'home'}) Home page 

thêm ở đây: https://pugjs.org/language/attributes.html