如何在 Jade/Pug 中對 ID 屬性使用插值

Question

我正在嘗試基於 MongoDB 數據庫動態構建chartContainers。 對於某些背景，我正在使用 CanvasJS 創建股票圖表。 我有一個迭代的“股票”變量，它是數據庫中所有元素的數組。 這是我的第一個 web 開發項目，也是我第一次使用 javascript 和哈巴狗，如果有明顯的問題，我們深表歉意。 作為參考，我使用這個模板構建了這個項目

   console.log(stocks);
      for(const element of stocks){
        const str = 'chartContainer' + element.ticker;
        console.log(str);
        // Need to get data for that chart
        renderChart(data1, str, element.ticker);
      }

當它在這里運行時是我的日志

這是渲染圖表函數（.js 文件）

function renderChart(chartData, chartContainer, Ticker = "Ticker") {
var chart1 = new CanvasJS.Chart(chartContainer,
  {
  title:{
  text: Ticker}, 
  axisY:{ title:"Price",minimum: 0, maximum: 6, includeZero: false},
  data: chartData });

  chart1.render();
  }

為了讓這些“圖表”顯示在網絡服務器上，我需要使用我之前定義的 ID 創建圖表容器。 這是在我的 pug 文件中，當我的數據庫中有兩個名為 TSLA 和 GOOGL 的項目時，它按預期工作。

  #chartContainerTSLA(style='width: 25%; height: 300px;display: inline-block;')
  #chartContainerGOOGL(style='width: 25%; height: 300px;display: inline-block;')

但是，我遇到的問題是我想在最后使代碼成為我正在更改的字符串。 我正在關注此鏈接以了解如何對其進行插值，但它不起作用。

我嘗試過的一些事情：

  for result in stocks
    #chartContainer!{result.ticker}(style='width: 25%; height: 300px;display: inline-block;')

我也試過更換！ 有一個 # 並且他們都沒有工作這是拋出的錯誤

 36|   for result in stocks
 37|     #chartContainer!{result.ticker}(style='width: 25%; height: 300px;display: inline-block;')
 ---------------------------^
 unexpected text "!{res"

我也試過

 for result in stocks
  - var containerName='chartContainer#{result.ticker}'
  #!{containerName}(style='width: 25%; height: 300px;display: inline-block;')

這引發了錯誤

 36|     for result in stocks
 37|       - var containerName='chartContainer#{result.ticker}'
 38|       #!{containerName}(style='width: 25%; height: 300px;display: inline-block;')
 --------------^
 "!{containerName}" is not a valid ID.

我正在尋找一種動態生成這些圖表容器的方法，這樣我就不必在每次將某些內容輸入數據庫時手動創建圖表容器。

Answer 1

我找到了解決方案

內部 JS 腳本：

for(const element of stocks){
        renderChart(data1, element.ticker, element.ticker);
      }

哈巴狗內部：

for result in stocks
   div(id=result.ticker,style='width: 25%; height: 300px;display: inline-block;')

Answer 2

您正在尋找的在 Pug 中稱為屬性插值。

在 Pug 中，為元素提供id屬性的簡寫是您已經使用並熟悉的hash 語法：

div#chartContainer

但是，這也可以使用常規屬性語法來編寫，如下所示：

div(id="chartContainer")

為了在id屬性中使用插值，您必須使用常規屬性語法而不是簡寫。

這將是您如何在循環中使用帶有id屬性的屬性插值，使用 JS 字符串連接或JS 模板字符串：

// using string concatenation
for result in stocks
  div(id= 'chartContainer' + result.ticker, style='...')

// using template strings
for result in stocks
  div(id=`chartContainer${result.ticker}`, style='...')