[英]How to Run Client-Side Function after Retrieving Data in a Node.js App
在 node.js Express 應用程序中,我有這條路線:
router.get('/devices/:id/visualize', catchErrors(deviceController.visualizeDevice));
對於這個 controller:
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
。 我應該怎么寫,這樣前端 function 才能對來自后端的數據起作用?
我不知道這是否是最好的方法,但是您可以在模板上的腳本標記中將數據傳遞到前端。
script var statuses = !{JSON.stringify(statuses).replace(/<\//g, '<\\/')}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.