如何在 Node.js 应用程序中检索数据后运行客户端功能

Question

在 node.js Express 应用程序中，我有这条路线：

router.get('/devices/:id/visualize', catchErrors(deviceController.visualizeDevice));

到此控制器：

exports.visualizeDevice = async (req, res) => {
  const device = await Device
    .findOne( { _id: req.params.id } )
    .populate({
      path: 'states',
      options: { limit: 999, sort: { changed: 'asc' }}
    });
  confirmOwner(device, req.user);
  res.render('visualizeDevice', { title: `Visualize Device: ${device.name}`, device });
};

具有以下观点：

extends layout

block content
  -
    let statuses = device.states;
  //- pre= h.dump(statuses)
  .calendarContainer
    .calendar 
      .calendarHeader
        .yearHeader
        ul.calendarHeaderDays
          li Sat
          li Sun
          li Mon
          li Tue
          li Wed
          li Thu
          li Fri
        .arrow.top#upArrow △
        .days

如果我转储状态，我可以看到它是我想要的；类似于：

[
  {
    "changeType": "unlocked",
    "_id": "5c635f3dff415e0980ebbd1e",
    "author": "5b74a5b26513f70a28f8776a",
    "device": "5c635eb3ff415e0980ebbd19",
    "changed": "2019-02-10T18:00:00.000Z"
  },
  {
    "changeType": "unlocked",
    "_id": "5c6366f3194a4800155cfac1",
    "author": "5b74a5b26513f70a28f8776a",
    "device": "5c635eb3ff415e0980ebbd19",
    "changed": "2019-02-13T00:38:11.935Z",
    "__v": 0
  },
...
]

我想在客户端运行以下脚本：

function populateCalendarDays(startDate=new Date()) {
  //  repeat 5 times for 5 weeks on the calender
  for (let j = 1; j <= 5; j++) {
    //  select the first day of the week
    let dayEl = document.querySelector(`.week${j}Day1`);
    //  repeat for 7 days
    for (let i = 0; i <= 6; i++) {
      if (getStatus(day) === "locked") {
        let lockEl = document.createElement('I');
        lockEl.classList.add('locked');
        dayEl.insertAdjacentElement('afterBegin', lockEl);
      }
      //  move to the next element
      dayEl = dayEl.nextElementSibling;
    }
    //  move to the next week
    startDate = addWeeks(startDate, 1);

  }
}

function getStatus(day) {
  status = "unlocked";
  for (let i = 0; i < statuses.length; i++) {
    if (compareAsc(day, parseISO(statuses[i].changed)) === 1) {
      status = statuses[i].changeType;
    }
  }
  return status;
}

但它给了我 Uncaught ReferenceError: statuses is not defined。我应该怎么写这样前端函数才能作用于来自后端的数据？

Answer 1

我不知道这样做是否是最好的方法，但是您可以在模板上的脚本标记中将数据传递到前端。

script var statuses = !{JSON.stringify(statuses).replace(/<\//g, '<\/')}

How to pass variable from jade template file to a script file?

如何在 Node.js 应用程序中检索数据后运行客户端功能

How to Run Client-Side Function after Retrieving Data in a Node.js App

javascript

node.js

express

pug

如何在 Node.js 应用程序中检索数据后 运行 客户端功能

How to Run Client-Side Function after Retrieving Data in a Node.js App

javascript

node.js

express

pug

如何在 Node.js 应用程序中检索数据后运行客户端功能