Verknüpfen der Ansicht/Modell in Django mit einem Javascript-Front-End-Framework

Question

Ich bin fließend Javascript, sowie Python und allgemein bekannt mit Django, aber sehr neu mit einigen dieser Javascript-Front-End-Frameworks.

Ich bin ein wenig verwirrt, auf dem Werkzeug, das ich für das folgende Szenario verwenden soll:

Ein Benutzer hat eine Suchabfrage, die mehrere Faktoren, aber ich mag, dass die Faktoren, einstellbar nach der Abfrage (dh Preis Schieberegler).

Idealerweise werden neue Ergebnisse (aus dem Filter "queryset" in der Django-Ansicht) ohne Aktualisierung wiedergegeben.

Ein anderes Szenario ist klassische Ajax mit Formular-Übermittlung ohne Aktualisierung erforderlich.

Ich denke über alle wichtigen Bibliotheken (jquery, reagieren) sowie Frameworks (Backbone, eckig, Ember).

Können alle diese das von mir angegebene Beispiel erfüllen? Welche Art von Prozess wird dies genannt (Datenbindung?) Und wo finde ich einige gute Tutorials zur Verkabelung von Django mit welchem ​​Framework/Bibliothek.

Vielen Dank im Voraus, jede Eingabe wird geschätzt.

Answer 1

Also schlage ich das folgende mit Ihrem Preisschieberegler Beispiel vor. Hier sehen Sie ein Beispiel für die Suche nach Benutzern mit nur jQuery.

Sie benötigen natürlich ein Eingabeformular für die Suchanfrage.

<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> 

Passen Sie das Aussehen dieser, wie Sie wollen. Wichtig ist hier, dass der Benutzer Text in das Suchfeld eingibt und auf "Go!" Klickt. Sie möchten ein jQuery-Ereignis an diese Aktion anhängen, senden Sie nicht als ein Formular, weil das Ihre Seite neu lädt, die Sie nicht möchten.

$(".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"); 
     } 
    }); 
}); 

Als nächstes benötigen Sie eine URL und View, um diese Ajax-Anfrage zu akzeptieren.

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)) 

Dies schließt die Schleife. Wenn ein Benutzer eine Suchanfrage eingibt, wird der Ajax einen Aufruf an Ihre Ressource machen, neue Ergebnisse erhalten, und ich werde die dynamische Änderung der Seite Ihnen überlassen.

Dinge zu tun:
- eine Art von "Maske" laden, während Ihre Abfrage abgerufen wird. Kann mit jquery und CSS - Zusätzliche Suchoptionen gemacht werden. Wahrscheinlich am besten als mehr Abfragezeichenfolgen in Ihrer Anfrage, die Sie an den Server vornehmen. Zum Beispiel "/ search? Name = Jack & age = 42".