Làm thế nào để biến các thuộc tính phần tử mã hóa HTML của Jade, và tạo ra một giá trị chuỗi ký tự bằng chữ?

Question

CẬP NHẬT Jade v0.24.0 sửa lỗi này với cú pháp != cho thuộc tính. option(value!='<%= id %>')

---

Tôi đang cố gắng để xây dựng một <option> với ngọc bích, trong đó giá trị của quyền chọn là một UnderscoreJS mẫu dấu: <%= id %> nhưng tôi không thể có được nó để làm việc vì ngọc bích được chuyển đổi văn bản đánh dấu của tôi để <= id > .

Dưới đây là đánh dấu Jade tôi:

script(id="my-template", type="text/template") 
    select(id="type") 
    <% _.each(deviceTypes, function(type){ %> 
    option(value='&lt;%= type.id %>') <%= type.name %> 
    &lt;% }) %> 

Tôi hy vọng nó sẽ tạo ra html này:

<script id="my-template" type="text/template"> 
    <select id='type'> 
    <% _.each(deviceTypes, function(type){ %> 
    <option value="<%= type.id %>"> <%= type.name %> </option> 
    <% }) %> 
    </select> 
</script> 

Nhưng những gì tôi nhận được thay vào đó, là thế này:

<script id="my-template" type="text/template"> 
    <select id='type'> 
    <% _.each(deviceTypes, function(type){ %> 
    <option value="&lt;%= type.id %&gt;"> <%= type.name %> </option> 
    <% }) %> 
    </select> 
</script> 

Note rất sự khác biệt tinh tế trong dòng <option> của đầu ra ... thuộc tính value của t tùy chọn của anh ta đã được mã hóa HTML.

Làm cách nào để ngăn Ngọc bích mã hóa HTML giá trị này? Tôi cần nó để tạo ra giá trị bằng chữ, giống như cách nó làm với văn bản của tùy chọn.

Answer 1

Theo văn bản này, tôi không tin rằng có cách nào đó. Xem vấn đề này: https://github.com/visionmedia/jade/issues/198

Tôi đã kết thúc việc đưa vào HTML thô để giải quyết nó bằng cách sử dụng | tiếp đầu ngữ.

Answer 2

Derick đã đề cập rằng Jade đã thêm tính năng mới cho mã hóa unescape HTML trong bản cập nhật, nhưng tôi muốn thêm một số phụ lục cho người có thể không nhận ra.

- var html = "<script></script>" 
| !{html} <-- Escaped 
| #{html} <-- Encoded 

từ https://github.com/visionmedia/jade

Answer 3

Tính năng này đã added to Jade. Bạn chỉ cần sử dụng các nhà điều hành != nếu bạn muốn để không dò tìm giá trị thuộc tính:

script#my-template(type='text/template') 
    a(href!='<%= url =>') Clicky clicky... 

Answer 4

Vì vậy, tôi đã có một vấn đề tương tự như sau, nơi tôi muốn tạo ra một mẫu gạch bên trong một quan điểm Jade tôi. Một phần của mẫu Gạch dưới cần thiết để đặt thuộc tính selected trong thẻ <option>.

Ban đầu, tôi đã thử trả lại dấu gạch dưới "đã chọn" hoặc "". Thật không may, Jade doesn't have a way to display an attribute with no value và không có một cách của tên thuộc tính không thoát (các bit Underscore đã trở lại mà không có dấu ngoặc kép).

May mắn thay, bạn có thể không nhận ra giá trị của thuộc tính, giữ lại dấu ngoặc kép.

Trong ví dụ này, tôi đang chọn giá trị của menu thả xuống dựa trên loại chủ sở hữu khớp với giá trị chuỗi. Tôi thiết lập một chức năng trợ giúp vì vậy tôi sẽ không phải tự thoát khỏi dấu ngoặc kép.

- var checkType = function(type) { return "<%= contact.type == '" + type + "' %>" }; 

.clearfix 
    label Title: 
    .input 
    select(type="text", name="contact[title]", class="new-title") 
     option(value="") Choose Title 
     option(value="manager", selected="#{ checkType('manager') }") Manager 
     option(value="member", selected="#{ checkType('member') }") Member 
     option(value="owner", selected="#{ checkType('owner') }") Owner 
     option(value="president", selected="#{ checkType('president') }") President 
     option(value="individual", selected="#{ checkType('individual') }") Individual 
     option(value="main_contact", selected="#{ checkType('main_contact') }") Main Contact 

Theo một số người, bạn sẽ có thể sử dụng !{} đây để hoàn toàn tránh tất cả các mã hóa (<, >, etc.), tuy nhiên điều này không làm việc trên phiên bản của tôi về Jade. Tôi đang sử dụng "^0.30" và phiên bản hiện tại là 1.x.

Nếu ai đó có thể xác minh rằng !{} không hoạt động trong tình huống này bằng phiên bản mới nhất của Jade, tôi sẽ cập nhật câu trả lời của mình.