Question

我尝试使用多行三元子句有条件地在页面上呈现不同的内容，具体取决于currentUser是否是帖子的所有者。

如果他们发了帖子，我想显示编辑/删除按钮。如果他们不是所有者，我想显示帖子所有者的用户名。

我和React有过类似的问题，直到我意识到我只需要投入大量的parens（）来使它工作。

这是我当前的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。在实践中，这意味着您只能启动EJS标记，其中JavaScript将接受分号前缀^†，不幸的是，三元运算符会破坏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}!`); };

使用EJS

1 个答案: