EJS를 사용하는 3 항 연산자 절의 여러 줄

Question

여러 줄의 3 진절을 사용하여 현재 사용자가 게시물의 소유자인지 여부에 따라 페이지의 다른 내용을 조건부로 렌더링하려고합니다.

게시물을 작성한 경우 수정/삭제 버튼을 표시하고 싶습니다. 소유자가 아닌 경우 게시물 소유자의 사용자 이름을 표시하고 싶습니다.

필자는 React를 사용하여 이와 비슷한 문제를 겪었습니다. 제대로 작동하려면 여러 가지 괄호()를 넣어야했습니다.

여기 (포맷 더 많거나 적은 내가 JSX를 사용한다면 내가 작성한 것입니다 방법) 내 현재 EJS 코드 : 사전에

<% (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는 일반 자바 스크립트로 직접 컴파일되지만 EJS는 더 많은 크래프트 including added semicolons이있는 중간 문자열 표현으로 컴파일됩니다. 실제로 이것은 자바 스크립트가 세미콜론 접두사 ^†을 허용하는 경우에만 EJS 태그를 시작할 수 있음을 의미합니다. 유감스럽게도 EJS가 세미콜론을 추가하는 방식으로 삼항 연산자가 작동하지 않습니다. 컴파일 된 시간에 디버깅을 활성화하면 생성 된 출력을 볼 수 있습니다.

// 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(""); 

† JavaScript는 예상보다 많은 장소에서 세미콜론을 허용합니다. 예를 들어 블록을 여는 중괄호 다음에 세미콜론을 넣을 수 있습니다. 세미콜론은 빈 문을 구분하기 때문입니다.

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