EJS条件文の変更CSS

Question

私は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。それ以外の場合は、type属性に基づいてCSSを生成します。

助けてください。

Answer 1

まず、このようなオブジェクトの作成：だけのことができます...

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

を

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

Answer 2

このコードを使用してみてください：

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

次に、あなたのテンプレートでちょうど出力値がなければならないがあなたのロジックをEJSオペレータの中に包みます。それはちょっと乱雑に見えますが、それはそれです。サーバー側の設定に応じて、クライアント側でロジックを実行する代わりに、サーバー側からパラメータを渡すこともできます。

最善の方法は、データベースへのトリップやその他のロジックが実行されている限り、どこで重労働が行われるかによって異なります。