Pug/Jade and inline javascript calculations

问题

I'm lost, again, trying to do some simple calculations in jade template.

Given this data object:

{
  "trade": {
    "name": "Mogens",
    "dst_currency": "EUR",
    "dst_value": 115.7,
    "src_price": null,
    "src_value": 2,
    "src_currency": "XMR",
    "date": null
    }
}

And this pug source:

table
  thead
    tr
      th Currency
      th Quantity
      th Price
      th Total
      th Date
  tbody
      tr
        script.
          if (trade.dst_currency === "EUR")
            trade.src_price = trade.dst_value / trade.src_value
          else
            trade.src_price = Number(trade.src_value) / Number(trade.dst_value)
        th.align-middle #{trade.dst_currency}
        th.align-middle #{trade.dst_value}
        th.align-middle= #{trade.src_price}
      th.align-middle #{trade.src_value} #{trade.src_currency}
      th.align-middle #{trade.date}

if trade.name === "Bob"
  h1 Hello Bob
else
  h1 My name is #{trade.name}

How is this done, if at all possible? What am I missing?

回答1:

Placing a script tag in your Pug code renders a script tag in your compiled HTML. It does not tell Pug to execute any javascript within the script tag when it compiles. If you want to run javascript in Pug as your code is compiled, use an unbuffered code block.

-
  // this is an unbuffered code block
  // that will update the value of `trade.src_price`
  // before it is rendered by Pug
  if (trade.dst_currency === "EUR") {
    trade.src_price = trade.dst_value / trade.src_value
  } else {
    trade.src_price = Number(trade.src_value) / Number(trade.dst_value)
  }

table
  thead
    tr
      th Currency
      th Quantity
      th Price
      th Total
      th Date
  tbody
    tr
      th.align-middle #{trade.dst_currency}
      th.align-middle #{trade.dst_value}
      th.align-middle= #{trade.src_price}
      th.align-middle #{trade.src_value} #{trade.src_currency}
      th.align-middle #{trade.date}

if trade.name === "Bob"
  h1 Hello Bob
else
  h1 My name is #{trade.name}

回答2:

Okay. Figured it out at last.

I had to give up on the inline script, and go with something more simple.

table
  thead
    tr
      th Currency
      th Quantity
      th Price
      th Total
      th Date
  tbody
      tr
        th.align-middle #{trade.dst_currency}
        th.align-middle #{trade.dst_value}
        if (trade.dst_currency === "EUR")
          th.align-middle #{trade.dst_value / trade.src_value}
        else
          th.align-middle #{trade.src_value / trade.dst_value}
        th.align-middle #{trade.src_value} #{trade.src_currency}
        th.align-middle #{trade.date}
p.
  EUR #{trade.dst_value / trade.src_value}
  XMR #{trade.src_value / trade.dst_value}

- var name = "Bobby"
if name == "Bob"
  h1 Hello #{name}
else
  h1 My name is #{trade.name}, born on #{trade.date}

Compiles to

<table>
  <thead>
    <tr>
      <th>Currency</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Total</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="align-middle">EUR</th>
      <th class="align-middle">115.7</th>
      <th class="align-middle">57.85</th>
      <th class="align-middle">2 XMR</th>
      <th class="align-middle">29 May, 1958</th>
    </tr>
  </tbody>
</table>
<p>
  EUR 57.85
  XMR 0.017286084701815037

</p>
<h1>My name is Mogens, born on 29 May, 1958</h1>

And that actually makes some sense.

(I would still like to be able to inline javascript, if anybody has ideas)

来源：https://stackoverflow.com/questions/53456071/pug-jade-and-inline-javascript-calculations