在 Jade 和 Javascript 中动态创建具有不同 id 的模态

Question

我正在使用 Nodejs/Express/Jade/Bootstrap 尝试创建一个库存系统，在该系统中我单击地图上的一个房间（300 个房间），然后出现一个模式（助推器），其中包含项目列表房间（最终是 CRUD）。虽然我完全有可能为每个房间创建不同的模式，然后为每个模式编写数据库查询，但我觉得我应该能够动态地做到这一点。理想情况下，我应该能够做类似的事情

for room-number in school
  #school[room-number].modal.hide
    (insert substance)

但我无法让 div id 正常工作。出现的是

<#rm3 class="modal hide">
×
Room 3
some text

这是我目前所拥有的。

school.jade

extends layout

block content
  .container
    .hero-unit
      h2 School
    .row-fluid
      .span12.pagination-centered.
        <img src="/images/School.jpg" usemap="#schoolmap">
        <map name="schoolmap">
          <area shape="rect" coords="264,276,332,310" href="#rm3" data-toggle="modal" />
        </map>


  - for (num in numbers)
    div#{numbers[num]}.modal.hide
      .modal-header
        | <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        h2 Room 3
      .modal-body
        p some text 

和 index.js

exports.lb = function(req, res) {
  res.render('school', {
              title: 'Inventory', 
      "numbers": ["#rm3", "#rm4", "#rm5", "#rm6"]
});
}

希望我的想法顺利，任何帮助都会很棒。提前致谢！

Answer 1

模态代码有问题。

 - for (num in numbers)
 .modal.hide(id="#{num}")
  .modal-header
    button.close(type="button", data-dismiss="modal", aria-hidden="true") x
    h2 Room 3
  .modal-body
    p some text

由于您处于 for (num in numbers) 中，因此您不必从数字中获取 num。可以直接访问num。

在 Jade 中，div 的 id 属性通常使用 # 设置，但在这种情况下，我怀疑 ##{num} 是否会起作用，这就是为什么我选择将它作为属性放在括号之间。

我也冒昧地格式化了您的关闭按钮。

还有另一种方式，而不是为每个房间创建一个模态，为什么不构建一个将被加载的空模态（在调用时使用带有信息的jQuery load function？

如果你不知道我在说什么，请告诉我，我会修改我的答案。