javascript - Jade Pug 每次迭代都通过选择框选择进行更改

Question

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

app.js

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

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( field 选择框)

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

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

Answer 1

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

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

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