2017-01-01 2 views
1

У меня есть цикл в EJS, и я хочу, чтобы установить CSS на основе моих данных:EJS изменить условный оператор CSS

<% dummies.forEach(function(dummy) { %> 
    <div class="panel panel-???"> 
    </div> 
<% }) %> 

мои данные:

var dummies = [{ 
    type: "funny", 
    sure: "Yes" // this should generate panel-success 
}, { 
    type: "funny", // this should generate panel-a 
    sure: "No" 
}, { 
    type: "happy", // this should generate panel-b 
    sure: "No", 
}]; 

Поэтому, когда sure атрибут Yes, он генерирует panel-success. В противном случае, он генерирует css на основе атрибута .

Пожалуйста, помогите.

ответ

3

Сначала нужно создать объект, как это:

<% 
let cssClass = { 
    funny: { 
     Yes: "success", 
     No: "a" 
    }, 
    happy: { 
     No: "b" 
    } 
} 
%> 

Затем вы должны только выходное значение в шаблоне:

<% dummies.forEach(function(dummy) { %> 
    <div class="panel panel-<%= cssClass[dummy.type][dummy.sure] %>"> 
    </div> 
<% }) %> 
+0

он работает, спасибо! Но, таким образом, я должен перечислять все возможности этих двух атрибутов (тип и конечно). На самом деле всякий раз, когда «уверен» - это «Да», это всегда успех панели, независимо от того, какое значение для «типа», поэтому мне интересно, возможно ли сократить его ... – shihandrana

+1

Итак, если конечно === панель «да» -type = "успех" – Shazam

1

Попробуйте использовать этот код ...

<% dummies.forEach(function(dummy) { %> 
    <div class="panel panel- 
     <% if (dummy.sure==="yes") { %> 
     success 
     <% else %> 
     <%= dummy.type %> 
     > 
    </div> 
    <% }) %> 

Вы можете просто завершите свою логику внутри операторов EJS. Это выглядит немного грязно, но это то, что есть. В зависимости от того, как настроена ваша серверная сторона, вы также можете передавать параметры со стороны сервера, а не выполнять логику на стороне клиента.

Наилучший способ будет зависеть от того, где выполняется тяжелая работа, вплоть до поездок в базу данных и любой другой логики.

Смежные вопросы