Django의보기/모델을 Javascript 프론트 엔드 프레임 워크에 연결

Question

나는 자바 스크립트뿐만 아니라 파이썬과 일반적으로 장고에 익숙하지만 일부 자바 스크립트 프런트 엔드 프레임 워크에서는 매우 익숙합니다.

가 나는 다음과 같은 경우에 사용해야하는 도구에 조금 혼란 스러워요 :

사용자는 여러 가지 요인이있는 검색 쿼리를 가지고,하지만 난 요인 쿼리 후 조정되고 싶어요 (즉 가격 슬라이더).

이상적인 결과 (django보기의 queryset 필터에서 가져옴)가 새로 고침없이 렌더링됩니다.

또 다른 시나리오는 새로 고침이 필요없는 양식 제출이있는 고전적인 아약스입니다.

프레임 워크 (백본, 각도, 엠버)뿐만 아니라 모든 주요 라이브러리 (jquery, 반응)를 고려하고 있습니다.

이 모든 것이 내가 준 예를 달성 할 수 있습니까? 어떤 유형의 프로세스가 호출 되는가? (데이터 바인딩?) 그리고 django를 프레임 워크/라이브러리로 연결하는 좋은 튜토리얼을 어디에서 찾을 수 있을까?

미리 감사드립니다. 모든 의견을 보내 주시면 감사하겠습니다.

Answer 1

가격 슬라이더 예제를 염두에두고 다음을 제안합니다. 다음은 jQuery를 사용하여 이름으로 사용자를 검색하는 방법의 예입니다.

분명히 검색어 입력 양식이 필요합니다.

<form class="search-form"> 
    <input type="text" name="search" placeholder="Search.." id="search-name"> 
    <button class="search-submit">Go!</button> 
    <!-- toggleable search options here, including your price slider. --> 
</form> 

원하는대로 표정을 사용자 정의하십시오. 여기서 중요한 것은 검색 상자에 텍스트를 입력하고 '이동'을 클릭하는 것입니다. 이 작업에 jQuery 이벤트를 첨부하려는 경우 이 아닌 제출 양식으로 제출하면 원하지 않는 페이지가 다시로드되므로 양식을 제출하십시오.

$(".search-submit").click(function() { 
    var url = "/search?name=" + $("#search-name").val(); 
    $.ajax({ 
     method: "GET", 
     url: url, 
     success: function (data) { 
      // Dynamically change your page results with more jquery based on data 
     }, 
     error: function (err) { 
      alert("Something went wrong"); 
     } 
    }); 
}); 

다음으로,이 ajax 요청을 받아들이려면 URL과보기가 필요합니다.

urls.py :

from views.py import search 
# Search URL 
url((r'^search/$', search), 

views.py :

import json 
from app.models import User 
from django.http import HttpRespons 

def search(request): 
    # Grab the data 
    query = request.GET.get("name", None) 
    # Make the query using your backend, the following is just an example 
    users = User.objects.filter(name=name) 
    # Serialize the objects as necessary 
    data = [] 
    for user in users: 
     data.append({ 
      "name" : user.name, 
      "age" : user.age, 
      # Other stuff you want from the objects you retrieved. 
     }) 
    return HttpResponse(json.dumps(data)) 

이 루프를 닫는다. 사용자가 검색 쿼리를 입력하면 아약스는 리소스에 대한 호출을하고 새로운 결과를 얻으며 페이지의 동적 변경을 그대로 남겨 둘 것입니다.

할 일 :
- 쿼리를 가져 오는 동안 어떤 종류의 "마스크"가로드됩니다. jquery와 CSS - 추가 검색 옵션으로 수행 할 수 있습니다. 아마 당신이 서버에 당신의 요청에 더 많은 쿼리 문자열로 완료. 예 : "/ search? name = Jack & age = 42"