如何在 Jade/Pug 中对 ID 属性使用插值

Question

我正在尝试基于 MongoDB 数据库动态构建 chartContainers。对于某些背景，我正在使用 CanvasJS 创建股票图表。我有一个“股票”变量，我遍历它是我数据库中所有元素的数组。这是我的第一个 Web 开发项目，也是我第一次使用 javascript 如果有明显的问题，哈巴狗非常抱歉。作为参考，我使用 this template

构建了这个项目

   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);
      }

When this runs here is my log

这里是渲染图表函数（.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;')

但是，我遇到的问题是我想将代码末尾设为我正在更改的字符串。我一直在关注 this link 如何对其进行插值，但它不起作用。

我尝试过的一些东西：

  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.

中称为 attribute interpolation

在 Pug 中，用于赋予元素 id 属性的 shorthand 是您已经在使用并熟悉的 哈希语法：

div#chartContainer

然而，这也可以使用 常规属性语法 编写，如下所示：

div(id="chartContainer")

为了在 id 属性中使用插值，您必须使用常规属性语法而不是 shorthand。

这就是您如何在循环中使用带有 id 属性的属性插值，使用 JS 字符串连接或 JS template strings:

// 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='...')

如何在 Jade/Pug 中对 ID 属性使用插值

How to use interpolation for the ID attribute in Jade/Pug

html

javascript

canvasjs

pug