2016-06-29 8 views
1

Ich bin fließend Javascript, sowie Python und allgemein bekannt mit Django, aber sehr neu mit einigen dieser Javascript-Front-End-Frameworks.Verknüpfen der Ansicht/Modell in Django mit einem Javascript-Front-End-Framework

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.

+0

Sie können dies definitiv mit nur jQuery erreichen, obwohl es mit einem leistungsfähigeren Javascript-Framework wie Angular oder React sauberer sein kann. Planen Sie mehr Funktionen auf Ihrer Website oder nur diese? – Nick

+1

Im Moment bin ich nur mit den Suchfiltern und der Formularübergabe beschäftigt. Später könnte ich noch zusätzliche Funktionalität hinzufügen. Wie kann ich die Suchfunktion mit jQuery/React/Angular ausführen? – Satchel

+0

Lassen Sie mich einige Dinge in der Antwort vorschlagen. – Nick

Antwort

2

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

+1

danke das ist was ich suche! Aus Neugier, an welcher Stelle wäre die Implementierung von Backbone/Angular oder Reactive sinnvoll? Und welche zusätzlichen Funktionen hätten sie für die Anwendung? – Satchel

+0

Angular und andere JavaScript-Frameworks sind viel leistungsfähiger als jQuery. Ich würde diese nicht noch hinzufügen, bis Sie sie wirklich verstehen, weil sie eine Menge Overhead hinzufügen, wie Sie Ihre Website erstellen. Mein Vorschlag ist, über sie zu lesen und zu sehen, welche Funktionen sie anbieten, aber bleiben Sie bei Ihrem aktuellen Weg, bis Sie überzeugt sind, dass Sie sie brauchen. – Nick