Pug/Jade 和内联 javascript 计算答案

【问题标题】：Pug/Jade and inline javascript calculationsPug/Jade 和内联 javascript 计算
【发布时间】：2019-04-26 14:52:50
【问题描述】：

我又迷路了，试图在翡翠模板中做一些简单的计算。

给定这个数据对象：

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

还有这个哈巴狗来源：

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}

如果可能的话，如何做到这一点？我错过了什么？

【问题讨论】：

标签： javascript pug

【解决方案1】：

好的。终于想通了。

我不得不放弃内联脚本，转而使用更简单的东西。

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}

编译为

<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>

这实际上是有道理的。

（如果有人有想法，我仍然希望能够内联 javascript）

【讨论】：

【解决方案2】：

在 Pug 代码中放置 script 标签会在编译的 HTML 中呈现 script 标签。它不会告诉 Pug 在编译时执行脚本标记中的任何 javascript。如果您想在编译代码时在 Pug 中运行 javascript，请使用 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}

【讨论】：