如何在 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='...')