Question

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

app.js

newEventList＆amp; 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）更老式，但也应该有效。

Jade Pug每次迭代都由Select box选项改变

1 个答案: