Làm cách nào tôi có thể kết xuất JavaScript nội tuyến bằng Jade / Pug?

222

Tôi đang cố gắng để JavaScript hiển thị trên trang của mình bằng Jade (http://jade-lang.com/)

Dự án của tôi nằm trong NodeJS với Express, eveything hoạt động chính xác cho đến khi tôi muốn viết một số JavaScript nội tuyến trong đầu. Ngay cả khi lấy các ví dụ từ các tài liệu Jade tôi cũng không thể làm cho nó hoạt động được những gì tôi đang thiếu?

Mẫu ngọc

!!! 5
html(lang="en")
  head
    title "Test"
    script(type='text/javascript')
      if (10 == 10) {
        alert("working")
      }
  body

Kết quả hiển thị HTML trong trình duyệt

<!DOCTYPE html>
<html lang="en">
<head>
  <title>"Test"</title>
  <script type="text/javascript">
    <if>(10 == 10) {<alert working></alert></if>}
  </script>
</head>
<body>
</body>
</html>

Đôi khi chắc chắn bỏ lỡ ở đây bất kỳ ý tưởng?

node.js express pug

— JMWhittaker
nguồn

3

Bạn đang thiếu một dấu chấm .sau(type='text/javascript')

— Warface

1

!!! 5không được dùng nữa, bạn phải sử dụngdoctype html

— Joaquinglezsantos

369

chỉ cần sử dụng thẻ 'script' với dấu chấm sau.

script.
  var users = !{JSON.stringify(users).replace(/<\//g, "<\\/")}

https://github.com/pugjs/pug/blob/master/examples/dynamicscript.pug

— liangzan
nguồn

Giải pháp tốt, nhưng nó sẽ chỉ sản xuất <script>thay vì <script type="text/javascript">.

— Vojto

47

type="text/javascript"là giá trị mặc định cho typetrường trên <script>thẻ. Bạn không cần phải thiết lập nó.

— Adam Fabicki

Còn mã multiline thì sao? Có cách nào để thụt mã thích hợp trong Javascript của tôi khi được nhúng trong Jade theo cách này không?

— missingfaktor

6

Chính sách của Jade đã thay đổi, thẻ script nội tuyến sẽ được .thêm vào. Vì vậy, script.theo sau là khối JS thụt lề của bạn.

— joeytwiddle

4

Ví dụ đó là một lỗ hổng tiêm script. Xem github.com/visionmedia/jade/issues/1474

— Jason Merrill

104

Bộ :javascriptlọc đã bị xóa trong phiên bản 7.0

Các tài liệu nói rằng bạn nên sử dụng một scriptthẻ ngay bây giờ, theo sau là một .char và không có khoảng trắng trước.

Thí dụ:

script.
  if (usingJade)
    console.log('you are awesome')
  else
    console.log('use jade')

sẽ được biên dịch thành

<script>
  if (usingJade)
    console.log('you are awesome')
  else
    console.log('use jade')
</script>

— Felipe Sabino
nguồn

tập lệnh thẻ có dấu chấm sau, trong tất cả các khối javascript có cách nào hiển thị nó mà không có dòng mới không?

— Joaquinglezsantos

@Joaquinglez không phải tôi biết

— Felipe Sabino

55

Sử dụng thẻ script với loại được chỉ định, chỉ cần đưa nó vào trước dấu chấm:

script(type="text/javascript").
  if (10 == 10) {
    alert("working");
  }

Điều này sẽ biên dịch thành:

<script type="text/javascript">
  if (10 == 10) {
    alert("working");
  }
</script>

— Stefan Jarina
nguồn

1

chỉ script.sẽ là tốt.

— NoobTW

24

Không sử dụng thẻ script chỉ.

Giải pháp với |:

script
  | if (10 == 10) {
  |   alert("working")
  | }

Hoặc với một .:

script.
  if (10 == 10) {
    alert("working")
  }

— Olivier C
nguồn

6

Tôi đề nghị .. Nếu không, bạn sẽ phải viết |trong mỗi dòng.

— Ilyas karim

2

PHIÊN BẢN THỨ BA CỦA TRẢ LỜI CỦA TÔI:

Đây là một ví dụ nhiều dòng của Jade Javascript nội tuyến. Tôi không nghĩ bạn có thể viết nó mà không sử dụng a -. Đây là một ví dụ tin nhắn flash mà tôi sử dụng một phần. Hi vọng điêu nay co ich!

-if(typeof(info) !== 'undefined')
  -if (info)
    - if(info.length){
      ul
        -info.forEach(function(info){
          li= info
      -})
  -}

Có phải mã bạn đang cố gắng để biên dịch mã trong câu hỏi của bạn?

Nếu vậy, bạn không cần hai điều: thứ nhất, bạn không cần phải tuyên bố rằng đó là Javascript / tập lệnh, bạn có thể bắt đầu viết mã sau khi nhập -; thứ hai, sau khi bạn gõ, -ifbạn không cần phải nhập {hoặc }. Đó là điều khiến Jade khá ngọt ngào.

-------------- NGUỒN GỐC XUẤT HIỆN DƯỚI ĐÂY ---------------

Hãy thử thêm vào trước ifvới -:

-if(10 == 10)
  //do whatever you want here as long as it's indented two spaces from
   the `-` above

Ngoài ra còn có hàng tấn ví dụ Jade tại:

https://github.com/visionmedia/jade/blob/master/examples/

— John ALLen
nguồn

Cảm ơn John đã sử dụng điều đó cho một dòng đơn lẻ, tuy nhiên tôi không thể thấy cách nào thực hiện nhiều dòng mà không cần thêm nó với '-'. Trang chủ Jade ( liên kết thậm chí có một ví dụ về những gì tôi đang cố gắng thực hiện, nhưng nó sẽ không được biên dịch. Tôi cũng đang sử dụng bản phát hành mới nhất.

— JMWhittaker

Vì vậy, bạn đang hỏi làm thế nào để có nhiều dòng mã Javascript bên dưới một nếu?

— John ALLen

@Bluey tương tự ở đây, tôi chưa bao giờ làm việc này. Bạn nên hỏi về các vấn đề github.

— Đánh dấu

Mark, hiện đã chuyển sang sử dụng Eco của Sam Stephenson thay vì Jade. Tôi chỉ sử dụng ngọc làm giao diện người dùng nhanh để thử nghiệm.

— JMWhittaker

Jade 0.12.4 cho phép tôi tạo tập lệnh () mà không cần thêm mã JS với - bên dưới nó.

— Richard Holland

1

Đối với ngọc nội dung nhiều dòng thường sử dụng "|", tuy nhiên:

Các thẻ chỉ chấp nhận văn bản như tập lệnh, kiểu và văn bản không cần dẫn đầu | tính cách

Điều này nói rằng, tôi không thể tái tạo vấn đề bạn đang gặp phải. Khi tôi dán mã đó vào một mẫu ngọc, nó sẽ tạo ra đầu ra đúng và nhắc tôi với một cảnh báo về tải trang.

— JPanneel
nguồn

0

Sử dụng :javascriptbộ lọc. Điều này sẽ tạo ra một thẻ script và thoát nội dung tập lệnh dưới dạng CDATA:

!!! 5
html(lang="en")
  head
    title "Test"
    :javascript
      if (10 == 10) {
        alert("working")
      }
  body

— Chris B
nguồn

@aaaidan Bạn nói đúng. Nó được hỗ trợ bởi Scalate (Tôi đang sử dụng nó ở đây không có vấn đề: github.com/cb372/phone-home/blob/master/src/main/webapp/WEB-INF/... ) nhưng có vẻ như tinh khiết Jade không hỗ trợ nó, vì nó không được liệt kê ở đây: github.com/visionmedia/jade#features . Thật là sự xấu hổ!

— Chris B

Vâng, sẽ rất tốt. Như câu trả lời hàng đầu nói, một script.tác phẩm tốt và hợp pháp!!! 5

— aaaidan

0

script(nonce="some-nonce").
  console.log("test");

//- Workaround
<script nonce="some-nonce">console.log("test");</script>

— Ransomware0
nguồn