视图渲染时,元素会重复很多次

时间:2016-05-21 20:04:49

标签: node.js express mongoose pug

我正在制作一个用于显示用户个人资料页面的控制器,在此页面中我们可以查看用户项目以及关注该用户的按钮。当我在Jade上渲染视图时,按钮会显示很多次。我认为这发生在Project.find()

的循环中

这就是我在控制器上的内容

userShow : function(req, res){
      Account.findOne({ username: req.params.username }, function(err, userWatch){
        Follow.findOne({followingUserID : userWatch.id}, function(err, follows){
          Project.find({ProjectOwner : userWatch.id}, function(err, projects){
            res.render('account/profile',{
              title : userWatch.username,
              user : req.user,
              watchUser : userWatch,
              listProjects : projects,
              listFollows : follows
            });
          });
        });
      });
    },

来自视图的内容。

extends ../includes/layout

block content
  div(class="wrap")
    include ../includes/header
    div(class="ink-grid")
      div(class="column-group vertical-space")
        div(class="all-100")
          - console.log("console.log en vistas y listFollows: "+ listFollows);
          - console.log("console.log en vistas y listProjects"+ listProjects);
          h1 #{title}
          if(user)
            for follow in listFollows
              form(method="post" action="/follows/#{watchUser.id}")
                button(type="submit" class="ink-button green") follow
        div(class="all-100")
          div(class="all-50")
            h3 #{watchUser.username}
            p #{watchUser.emailAccount}
          div(class="all-50")
            button(class="ink-button grey") send message
        div(class="all-100")          
          div(class="all-100")
            div(class="all-80")
              for project in listProjects
                div(class="all-25")
                  figure(class="ink-image bottom-space") 
                    figcaption(class="over-top dark")
                      p #{project.ProjectName} 
                    img(src="/userFiles/projectImage/#{project.ProjectFileName}")

    div(class="push") 
  include ../includes/footer

来自 console.log 的内容。

console.log en vistas y listFollows: 

    { __v: 0,
      alreadyFav: true,
      followingUserID: '5720977ffe0697f51001c9a1',
      fromFollowUserId: '5720977ffe0697f51001c9a1',
      createdAt: Sat May 21 2016 19:23:43 GMT+0300 (+03),
      updatedAt: Sat May 21 2016 19:23:43 GMT+0300 (+03),
      _id: 57408b8fdecb09cb1a2a8b11 }
    console.log en vistas y listProjects{ __v: 0,
      ProjectLocation: 'Barcelona',
      ProjectAmount: 5555555,
      ProjectFileName: 'UploadedOn1462972254926fileOrigName13173780_1079858715421616_6060943026998765865_n.jpg',
      ProjectDetails: 'Proyecto de prueba, usuario testauth5',
      ProjectName: 'Proyecto 1',
      ProjectOwner: '5720977ffe0697f51001c9a1',
      _id: 57332f5fb4b04c3417fd32d7 },{ __v: 0,
      ProjectLocation: 'Lugar fántastico',
      ProjectAmount: 777777,
      ProjectFileName: 'UploadedOn1462977655765fileOrigNamerapunzel__s_tower_2_by_rosequartz-d3f7i0u.jpg',
      ProjectDetails: 'Loft acojedor con interior de madera. Perfecto para la clausura o encerrar a alguien.',
      ProjectName: 'Torre de Rapunzel',
      ProjectOwner: '5720977ffe0697f51001c9a1',
      _id: 57334477b4b04c3417fd32d8 },{ __v: 0,
      ProjectLocation: 'Lugar fantástico',
      ProjectAmount: 900000,
      ProjectFileName: 'UploadedOn1462979462355fileOrigNametumblr_mi43enfyLB1qcbsgdo1_500.jpg',
      ProjectDetails: 'económico castillito de piedra y tejado de pizarra ',
      ProjectName: 'Castillo de teja negra',
      ProjectOwner: '5720977ffe0697f51001c9a1',
      _id: 57334b86b4b04c3417fd32d9 },{ __v: 0,
      ProjectLocation: 'Suiza',
      ProjectAmount: 666666,
      ProjectFileName: 'UploadedOn1463581840556fileOrigName13122913_798137460320744_2366020950260825105_o.jpg',
      ProjectDetails: 'texto de prueba en proyecto 20',
      ProjectName: 'proyecto 20',
      ProjectOwner: '5720977ffe0697f51001c9a1',
      createdAt: Wed May 18 2016 17:30:40 GMT+0300 (+03),
      updatedAt: Wed May 18 2016 17:30:40 GMT+0300 (+03),
      _id: 573c7c903f4b91120feecf93 },{ __v: 0,
      ProjectLocation: 'Viena',
      ProjectAmount: 2222222,
      ProjectFileName: 'UploadedOn1463751212107fileOrigName8e03d5919704bfa20f45a94e207d5025.600x.jpg',
      ProjectDetails: 'otro castillito de ejemplo',
      ProjectName: 'little castle',
      ProjectOwner: '5720977ffe0697f51001c9a1',
      createdAt: Fri May 20 2016 16:33:32 GMT+0300 (+03),
      updatedAt: Fri May 20 2016 16:33:32 GMT+0300 (+03),
      _id: 573f122c7e0c94e760a6771b },{ __v: 0,
      ProjectLocation: 'Suiza',
      ProjectAmount: 888888,
      ProjectFileName: 'UploadedOn1463752504948fileOrigName13217170_1078714605505775_6819378884998619975_o.jpg',
      ProjectDetails: 'castillo en lo alto de las cumbres',
      ProjectName: 'castillo de hielo',
      ProjectOwner: '5720977ffe0697f51001c9a1',
      createdAt: Fri May 20 2016 16:55:04 GMT+0300 (+03),
      updatedAt: Fri May 20 2016 16:55:04 GMT+0300 (+03),
      _id: 573f17387e0c94e760a6771c }
  

视图上的日志显示为正常内容和正确的数量   次。

1 个答案:

答案 0 :(得分:0)

findOne()不会返回一个数组,所以你可能会迭代对象键,因此每个键都有一个按钮。

你只有一个跟随对象,所以我猜你不应该迭代它。

如果您想要跟随查询多个结果,则应使用find代替findOne。如果您想要的是单个结果,则应删除for follow in listFollows