Tôi làm cách nào để sử dụng các mẫu Underscore.js kết hợp với EJS?

Question

Cả hai đều sử dụng cùng một cú pháp để chèn biến. Ví dụ nếu tôi muốn những điều sau

<%= username %> 

Trong gạch của tôi, phá vỡ EJS chính của tôi vì nó cố gắng để thay thế tên đăng nhập và không có biến như vậy tồn tại ở trang chính.

Answer 1

Tôi nghĩ rằng dấu ngoặc vuông sẽ làm việc trong EJS theo mặc định:

[%= username %] 

Và nếu bạn cần phải nhận được fancier, trang github EJS mô tả cách tạo thẻ tùy chỉnh:

var ejs = require('ejs'); 
ejs.open = '{{'; 
ejs.close = '}}'; 

• Tôi nghĩ rằng phần "fancier" thứ hai có thể dành riêng cho các ứng dụng phía máy chủ

https://github.com/visionmedia/ejs

Sử dụng GitHub dụ phía khách hàng, bạn sẽ cần phải làm cú pháp như thế này khi bạn render:

var html = require('ejs').render(users, { open: "^%", close: "%^" }); 

Tùy chọn là tham số thứ 2 của render().

Answer 2

Tôi gặp vấn đề này và nghĩ rằng tôi sẽ chia sẻ giải pháp mà tôi đã tìm thấy để giải quyết vấn đề phía khách hàng. Sau đây là cách thay đổi của bạn regex thoát (thông qua underscore.js docs):

_.templateSettings = { 
    interpolate : /\{\{(.+?)\}\}/g 
}; 
var template = _.template("{{example_value}}"); 

Thay đổi <% =%> để {{}}.

Answer 3

Tôi đã gặp vấn đề tương tự khi tôi muốn hiển thị trang web bằng mẫu ejs trên back-end (express), trong khi đó tôi phải sử dụng mẫu gạch dưới trên giao diện người dùng.

Tôi đã thử câu trả lời của Marc nhưng không hiệu quả, tôi nghĩ rằng nó đã lỗi thời để sử dụng trong phiên bản mới hơn. Trong phiên bản ej mới hơn (của tôi là 2.3.3), bạn không còn có thể sử dụng ejs.open và ejs.close, thay vào đó hãy sử dụng ejs.delimiter.

Tôi đã thay đổi dấu phân tách thành '$' trong ej để ejs sẽ chỉ xử lý với thẻ <$ $> để chèn biến và mất <% %> thẻ làm cú pháp vô nghĩa.

app.set('view engine', 'ejs'); 
var ejs = require('ejs'); 
ejs.delimiter = '$'; 
app.engine('ejs', ejs.renderFile); 

Chú ý: Tôi thêm mã trên trong app.js tập tin trong các ứng dụng nhanh và nó làm việc tốt, và nếu bạn muốn sử dụng nó trên front-end, chỉ cần vượt qua {'delimiter': '$'} trong ejs.render(str, options) như các tùy chọn đối số.

Answer 4

Gần đây tôi đã gặp sự cố này và tôi không muốn định cấu hình lại EJS, vì vậy tôi đã thay đổi cách gạch dưới nội suy, đánh giá và thoát giá trị.

Theo mặc định, đây là các thiết lập gạch khuôn mẫu hiện tại:

_.templateSettings = { 
    interpolate: /<%([\s\S]+?)%>/g, 
    evaluate: /<%=([\s\S]+?)%>/g, 
    escape: /<%-([\s\S]+?)%>/g 
}; 

Sau đó, tôi được cập nhật các thiết lập để:

_.templateSettings = { 
    interpolate: /\{\{=([^}]*)\}\}/g, 
    evaluate: /\{\{(?!=)(.*?)\}\}/g, 
    escape: /\{\{-([^}]*)\}\}/g 
}; 

Nói cách khác, đoạn trên sẽ thay đổi sau trong dấu gạch dưới:

• Interpolate

  • Từ: <%= ... %>
  • Để: {{= ... }}
  • Biểu hiện: /\{\{=([^}]*)\}\}/g

• Đánh giá

  • Từ: <% ... %>
  • Để: {{ ... }}
  • Biểu hiện: /\{\{(?!=)(.*?)\}\}/g

• thoát

  • Từ <%- ... %>
  • Để: {{- ... }}
  • Biểu hiện: /\{\{-([^}]*)\}\}/g

Sau đó, mẫu gạch của tôi trông như thế này:

// Underscore 
<script type="text/template"> 
    <ul> 
    {{ _.each(collection, function(model) { }} 
    <li>{{= model.text }}</li> 
    <li>{{- model.textEscaped }}</li> 
    {{ }); }} 
    </ul> 
</script> 

... và các mẫu EJS của tôi vẫn như cũ và tôi có thể tiếp tục sử dụng mặc định ERB cú pháp để suy/đánh giá giá trị: <% ... %> và <%= ... %>:

// EJS 
<% if (isAuthenticated) { %> 
    <%= user.displayName %> 
<% } %>