비취 퍼그 선택 상자 선택에 따라 변경됨

Question

방금 ​​Pug/Jade 템플릿을 사용하여 익스프레스 앱에서 보낸 이벤트 객체를 반복하기 시작했습니다. 그것은 잘 작동하지만 지금은 드롭 다운 (선택) 이벤트 개체의 장소에 의해 채워진 선택 상자를 추가했습니다. 내 문제는 간단 해 보이지만 가능하다면 어떻게해야하는지 잘 모르겠습니다. 기본적으로 선택 항목을 변경 한 다음 해당 특정 장소의 이벤트 만 표시하려고합니다. 이벤트 목록은 모든 장소에서 시작하지만 선택 상자를 변경 한 다음 해당 장소의 이벤트 만 표시하려고합니다. 여기에 약간의 코드가 있습니다.

는

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을 index.pug하여 경로로 전송 렌더링

newEventList & venueList 배열을 app.js)

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

퍼그 코드 내의 일정을 필터링하거나 app.js 파일에서 필터링을 수행하고 템플릿으로 다시 보내야합니까? 어떤 조언을 크게 받았습니다. 감사합니다

Answer 1

나는 당신이 올바른 직감을 가지고 있다고 생각합니다 : 프론트 엔드와 백엔드에 동적 코드가 있어야합니다. 두 가지 옵션이 있지만 모두 비동기 통신 (예 : AJAX 호출 또는 페이지 리디렉션)이 있습니다. 나는 아래에서 가장 직설적이라고 생각되는 것들을 나열 할 것이다 :

1) 장소 선택 이벤트가 서버 종점에 대한 호출을 유발할 수있다. 이 호출은 선택된 장소를 통과 할 수 있으며, 그 다음 엔드 포인트는 그 장소에서 일어나는 이벤트 목록을 반환 할 수 있습니다. 프론트 엔드 (클라이언트)가이 호출로부터 응답을 받으면, 일부 프론트 엔드 코드는 그리스트를 브라우저로 렌더링해야합니다. 이 코드는 브라우저에서 실행되므로 Pug를 템플릿 프레임 워크로 사용하지 않아도됩니다. jQuery는 이러한 종류의 DOM 조작을위한 옵션이지만, MVC 프레임 워크는 이러한 작업을 더 쉽게 할 수 있습니다 (배워야 할 시간이 있다면).

2) 장소 선택 이벤트 트리거를 매개 변수가 첨부 된 페이지 (예 : /index.html?venue=xyz)로 리디렉션 할 수 있습니다. 이 매개 변수는 서버의 app.js에서 액세스 할 수 있으며 Pug 템플릿으로 전달됩니다. Pug 템플릿은 새 페이지를 적절하게 렌더링 할 수 있습니다. 이 방법은 1보다 조금 더 구식이지만 접근해야합니다.