Jade Pug 每次迭代都由选择框选择更改

Question

我刚刚开始使用 Pug/Jade 模板来遍历我从快速应用程序发送的事件对象。它工作得很好，但现在我添加了一个选择框，其中包含由事件对象中的场地填充的下拉（选择）。我的问题似乎很简单，但我不确定它是否可能以及如何去做。基本上，我想更改选择项，然后只显示该特定场地的事件。活动列表从所有场地开始，但我想更改选择框，然后只显示该场地的活动。这是我的一些代码。

app.js

newEventList 和venueList 数组发送到路由并由index.pug 渲染

index.pug(事件列表)

ul#grid
  each event in newEventList
    li
      div.event
        h4.eventTitle= event.name
        h6.eventDesc= event.venue
        h6.eventStart= event.startTime

index.pug(场地选择框)

  .styled-select#VenueSelect
      select
        each venue in VenueList
          option(value=(venue.name)) #{venue.name}

我可以过滤 pug 代码中的事件，还是需要在 app.js 文件中进行过滤并将其重新发送回模板？任何建议都非常受欢迎。谢谢

Answer 1

我认为您的直觉是正确的：前端和后端都需要一些动态代码。您有几个选项，但所有选项都涉及一些异步通信（例如 AJAX 调用或页面重定向）。我将在下面列出我认为最直接的两个：

1) 您可以让场地选择事件触发对服务器端点的调用。该调用可以通过选定的地点，然后端点可以返回在该地点发生的事件列表。一旦前端（客户端）收到此调用的响应，一些前端代码将需要将该列表呈现到浏览器中。此代码将在浏览器中执行，因此无需 Pug 作为模板框架。 jQuery 是此类 DOM 操作的一个选项，但 MVC 框架可以使这项任务更容易（如果您有时间学习它们）。

2) 您可以让场地选择事件触发重定向到附加参数的页面（例如/index.html?venue=xyz）。该参数可以从服务器上的app.js 访问并传递给 Pug 模板。然后 Pug 模板可以适当地呈现新页面。这种方法比 1) 有点过时，但也应该有效。