ジェイドパグは、[選択]ボックスの選択

Question

によって変化し、各反復は、私はちょうど私が急行アプリから送信したイベントのオブジェクトを反復処理するパグ/ジェイドテンプレートを使用して開始しています。それは素晴らしい作品ですが、今私は、ドロップダウン（選択）イベントのオブジェクトの会場で設定された選択ボックスを追加しました。私の問題はシンプルなようですが、それが可能かどうか、それをどうやってやるのかについては本当に分かりません。基本的には、選択したアイテムを変更して、その特定の会場のイベントのみを表示したいのです。イベントのリストはすべての会場から始まりますが、選択ボックスを変更してその会場のイベントのみを表示したいと思います。ここに私のコードのビットです。

app.js

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（会場選択ボックスをindex.pugによってレンダリング）

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

pugコード内のイベントをフィルタリングすることはできますかapp.jsファイルでフィルタリングを行い、それをテンプレートに再送する必要がありますか？どんな助言も大いに受けました。おかげ

Answer 1

私はあなたが正しい直感を持っていると思う：フロントエンドとバックエンドの上に、いくつかの動的なコードが存在する必要があります。いくつかのオプションがありますが、すべてには非同期通信（例：AJAX呼び出しやページリダイレクト）が含まれています。あなたが会場selectイベントは、サーバーのエンドポイントへの呼び出しをトリガーする可能性があり

1）：私は、私は以下の二つの最も率直なものだと思うものをリストアップするつもりです。このコールは、選択された会場を通過することができ、エンドポイントは、その会場で行われるイベントのリストを返すことができる。フロントエンド（クライアント）がこの呼び出しから応答を受け取ると、いくつかのフロントエンドコードはそのリストをブラウザにレンダリングする必要があります。このコードはブラウザで実行されるため、Pugをテンプレートフレームワークとして使用することはできません。 jQueryはこれらの種類のDOM操作のオプションですが、MVCフレームワークではこのタスクをより簡単に行うことができます（学習する時間があれば）。

2）あなたは会場selectイベントは、添付のパラメータ（例えば/index.html?venue=xyz）のページへのリダイレクトをトリガーする可能性があります。このパラメータは、サーバー上のapp.jsからアクセスし、Pugテンプレートに渡すことができます。 Pugテンプレートは、新しいページを適切にレンダリングできます。このアプローチは、1）より少し古くなっていますが、うまくいくはずです。