代码之家  ›  专栏  ›  技术社区  ›  dikuw

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

  •  0
  • dikuw  · 技术社区  · 4 年前

    在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 。我应该如何编写此代码,以便前端函数可以对来自后端的数据进行操作?

    0 回复  |  直到 4 年前
        1
  •  1
  •   georgedum    4 年前

    我不知道这是否是最好的方法,但你可以在模板上的脚本标签中将数据传递给前端。

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

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