如何在Bootstrap Modal中动态单击生成的变量来设置jade属性?

时间:2015-04-10 14:12:06

标签: javascript node.js twitter-bootstrap pug bootstrap-modal

我已经通过mongoose将有效的JSON返回到我的Jade文件,名为things的JSON看起来像这样,

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

我有一个玉文件吐出我想要的页面的详细信息

基本上当你点击glyphicon-plus-sign时,我正在打开一个模态窗口

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")

My Modal在下面的同一文件中声明为

.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') ×           
      .modal-body
        .somethingDetails.col-md-6.col-lg-6
         if property
            each nameProperty in property 
              p#propertyName #{nameProperty.name}

这不起作用。我可以在nested sub items中为特定项array循环click event吗?

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

或者我应该写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尝试实现的目标能够得到满足,那就太棒了。

1 个答案:

答案 0 :(得分:0)

  

我是否可以针对特定项目点击事件循环遍历数组中的嵌套子项?

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

  

这里的最佳做法是什么?

使用Jade。

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

假设您已使用数组的things标识符:

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

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