EJSを使用した3項演算子節の複数の行

Question

複数行の3項節を使用して、現在のユーザーが投稿の所有者であるかどうかに応じて、ページのさまざまなコンテンツを条件付きで表示しようとしています。

投稿を投稿した場合は、編集/削除ボタンを表示する必要があります。彼らが所有者でない場合、私は投稿の所有者のユーザー名を表示したいと思います。

Reactでこれと同様の問題を抱えていましたが、私はそれを機能させるためにたくさんの括弧を投げ入れる必要があることに気づきました。ここで

私の現在のEJSコードは（多かれ少なかれ私はJSXを使用していた場合、私はそれを書かれているような方法でフォーマット）である：事前に

<% (currentUser && artpiece.author.id.equals(currentUser._id)) ? (%> 

    <a class='btn btn-warning btn-sm' href='/artpieces/<%= artpiece._id %>/edit'>Edit</a> 
    <form style='display: inline' action="/artpieces/<%= artpiece._id %>?_method=DELETE" method="POST"> 
     <button class='btn btn-danger btn-sm' onclick="return confirm('Are you sure you want to delete this artpiece?')">Delete</button> 
<% </form>) : (%> 

<% <p><em>Submitted by <%= artpiece.author.username %></em></p>) %> 

ありがとう！

Answer 1

EJSのような三項演算子は使用できません。

JSXは普通の古いJavaScriptに直接コンパイルされますが、EJSはより多くの難問を抱える中間文字列表現にコンパイルしますincluding added semicolons。実際には、これは、JavaScriptがセミコロンプレフィックス^†を受け入れる場合にのみEJSタグを開始できることを意味します。残念ながら、EJSがセミコロンを追加する方法には3つの演算子が壊れています。 JavaScriptは1が期待するよりも、より多くの場所でのセミコロンを受け入れ†

// EJS for an if else statement 
ejs.compile(
    `<% if (true) { %>yes<% } else { %>no <% } %>`, 
    { debug: true } 
) 

// Generated JS for evaluation 
// Notice that each <% %> turns into a ' ; ' + line + '\n'; 
var __output = [], __append = __output.push.bind(__output); 
with (locals || {}) { 
    ; if (true) { 
    ; __append("yes") 
    ; } else { 
    ; __append("no ") 
    ; } 
} 

// EJS for a ternary statement 
ejs.compile(
    `<% true ? (%>yes<%) : (%>no <%) %>`, 
    { debug: true } 
) 

// Generated JS, again each <% %> turns into ' ; ' + line + '\n'; 
// but this time, the JavaScript generated is invalid. 

var __output = [], __append = __output.push.bind(__output); 
with (locals || {}) { 
    ; true ? ( 
    ; __append("yes") 
    ; ) : ( 
    ; __append("no ") 
    ; ) 
} 
return __output.join(""); 

：あなたはコンパイル時にデバッグを有効にした場合には、生成された出力を見ることができます。たとえば、ブロックを開く中括弧の後にセミコロンを置くことができます。セミコロンは空文を区切るためです。

; if (true) {; console.log("it's true!"); }; 
; while (true) {; console.log("it's true!"); break; }; 
; function whaaat(a) {; console.log(`it's ${a}!`); };