2017-03-18 4 views
1

나는 nodeJS, express, MongoDB 및 Handlebars를 사용하여 간단한 웹 응용 프로그램을 개발하고 있습니다. 서버 측 내가 표현 - 핸들 사용 : 제가 DB를 조회 할 때 한 페이지에 클라이언트에 결과를 보여주고 싶은, 그래서노드 JS 정렬 배열 Handlebars 템플릿 클라이언트 쪽 전달 된

var exphbs = require('express-handlebars'); 
// View Engine 
app.set('views', path.join(__dirname, 'views')); 
app.engine('handlebars', exphbs(
    { 
     defaultLayout:'layout', 
     helpers: { /*my helpers*/}})); 

을 : /* 일부 코드 */ router.get ('/ '기능 (REQ, 고해상도) {결과를 표시

/*query to mongo DB with mongoose*/ 
    Coll.find(queryParams, function(err,coll){ 
     if(err) { 
        console.log(err); 
        throw err; 
       } 
       else { 
        res.render('index', {'coll': coll}); 
       } 
    }); 

가 핸들과 매우 간단합니다 :

{{#each coll}} 
{{this}} 
{{/each}} 

하지만 woul 질의 결과가 같고 순서 만 변경된다는 가정하에 사용자가 서버와 다시 상호 작용하지 않고이 배열을 정렬 할 수있게하고 싶다. HTML 코드는 다음과 같습니다

<select id=id> 
<option>sort1</option> 
<option>sort2</option> 
</select> 
{{#each list}} 
{{this}} 
{{/this}} 
<script> 
$(document).ready(function() { 
    $('#id').change(function(){ 

//DO SOME STUFF WITH LIST 
}); 
</script> 

는 클라이언트 측 res.render (...)를 통해 전달 된 배열을 정렬하는 방법을 존재 하는가? 사용자가 select 태그에서 옵션을 선택하면 AJAX를 사용하여 목록을 수정할 수 있습니까? 그리고 어떻게? (항상 서버와 상호 작용하지 않고 mongoDB에서 같은 쿼리를 다시 실행하지 않아도 됨)

추신 : 저는 nodeJS와 Handlebars로 초보자입니다.

답변

0

현재 접근법은 서버에서 핸들 모음 템플릿을 실행하고 렌더링 된 html의 일부로 생성 된 결과 문자열을 전달하는 것입니다.

두 가지 선택이 있습니다. 클라이언트 측에서 html을 다시 해석하여 정렬 할 수있는 배열에 html로 해석 한 다음 html로 배열을 다시 포맷하려고합니다. 또는 서버로 AJAX 호출을합니다. 데이터를 클라이언트 코드에서 전적으로 처리하도록하십시오.

첫 번째 방법은 까다 롭고 유지 관리가 어려운 코드가 생성됩니다. 후자의 선택은 훨씬 더 뛰어나며 훨씬 더 큰 유연성을 제공합니다.

이렇게하려면 res.send 또는 res.json을 사용하여 데이터를 다시 전달해야합니다 (res.render 대신 this link for more details 참조). JavaScript 코드에 전달 된 원본 데이터에 대한 참조를 유지하면 . 그리고

당신이 당신의 핸들 템플릿 클라이언트 측을 실행하기를 원할 것입니다 나중에 정렬 수 (또는 자바 스크립트를 사용하여 조작 - 핸들을 사용하여 쉽게하지만) 할 수있는 AJAX 호출에서 데이터에 그것을 참조를 전달하여

합니다. 원하는 것을 성취하기 위해서는해야 할 일이 많이 있습니다. res.json() 호출 (또는 res.send())에서 데이터를 가져 와서 콘솔에 쓰는 데이터를 쓰는 것으로 시작합니다. , y ou는 클라이언트 측 템플리트 컴파일 및 실행에 집중할 수 있습니다. 마지막으로 스크립트 코드를 추가하여 다양한 방식으로 데이터를 정렬 할 수 있습니다.