如何在 Bootstrap Modal 中为 Dynamically click generated variables 设置 jade 属性？

Question

我已经通过 mongoose 向我的 Jade 文件返回了一个有效的 JSON，名为 things 的 JSON 看起来像这样，

[{
   _id: ObjectId("7788h356i0909v7863b75999"),
   important: "Critical123",
   property:[{name: "Test456"},{name: "Test789"},{name: "Test101112"}]
 },
 {
   _id: ObjectId("7788h356i0909v7863b75908"),
   important: "Critical",
   property:[{name: "TestNew"},{name:"TestNewlyOpened"}]
  }
]

我有一个 jade 文件吐出我想要的页面的详细信息，如下所示

基本上，当您单击 glyphicon-plus-sign 时，我会打开一个模式 window

if thing
   each something in thing
          tr.odd.gradeX(id="firstRow" rowspan="2")
             td.imp(type="button") #{something.important}
               a.glyphicon-plus-sign(id="#{something._id}" data-toggle="modal" data-target=".bs-example-modal-lg")

我的模态框在下面与

相同的文件中声明

.modal.fade.bs-example-modal-lg(id="modalBoxSomething" tabindex='-1', role='dialog', aria-labelledby='myLargeModalLabel', aria-hidden='true', style='display: none;')
  .modal-dialog.modal-lg
    .modal-content
      .modal-header#headerModal
        h4#myLargeModalLabel.modal-title
        button.close(id="modalCloseButton" type='button', data-dismiss='modal', aria-label='Close')
          span(aria-hidden='true') &times;           
      .modal-body
        .somethingDetails.col-md-6.col-lg-6
         if property
            each nameProperty in property 
              p#propertyName #{nameProperty.name}

这行不通。我可以在 array 中循环 nested sub items 以获得特定项目 click event 吗？

我想在此 modal window 中为每个 something 重复 property 数组的值。

或者我应该写一个 Javascript 来做这个吗？

for(var k=0; k<things.length; k++){
      for(var m=0; k<things[k].property.length; m++){
         $('#propertyName').append('<p>'+JSON.stringify(things[k].property[m].name+'</p>');
      }
}

此处的最佳做法是什么？ Javascript 解决方案有效，但如果我试图在 Jade 中实现的目标能够出色地工作，那就太好了。

Answer 1

Can I loop over nested sub items in an array for a specific item click event?

当然可以。 Jade 模板使用 JavaScript 呈现，您也可以通过在行首使用 - 在模板中使用原始 JavaScript。如果您的 JavaScript 代码符合您的要求，您可以将其逻辑移动到您的模板文件中。

What is the best practice here?

使用翡翠。

不清楚您的模板文件中的 property 是什么。如果您希望 Jade 知道它是一个对象数组的属性，那么事实并非如此。您需要遍历数组，然后遍历每个对象元素的 property 数组，即 2 个嵌套循环。

假设您已经为数组使用了 things 标识符：

each thing, index in things 
  h2.sample= thing.important
  each item in thing.property
     p.propertyName= item.name

请注意，ID 必须唯一，否则您生成的标记无效。

如何在 Bootstrap Modal 中为 Dynamically click generated variables 设置 jade 属性？

How can jade attributes be set for Dynamically click generated variables in Bootstrap Modal?

javascript

node.js

twitter-bootstrap

bootstrap-modal

pug