/ / Verknüpfen der Ansicht / des Modells in Django mit einem Javascript-Frontend-Framework - jquery, angularjs, django, backbone.js, reactjs

Verknüpfen der Ansicht / des Modells in Django mit einem Javascript-Frontend-Framework - jquery, angularjs, django, backbone.js, reactjs

Ich spreche 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 darüber, welches Tool ich für das folgende Szenario verwenden sollte:

Ein Benutzer hat eine Suchanfrage mit mehreren Faktoren, aber ich möchte, dass die Faktoren nach der Abfrage angepasst werden können (z. B. Preisschieberegler).

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

Ein anderes Szenario ist der klassische Ajax mit Formularübertragung ohne Aktualisierung.

Ich betrachte alle wichtigen Bibliotheken (jquery, react) sowie Frameworks (Backbone, eckig, ember).

Kann all das das von mir gegebene Beispiel vollbringen? 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.

Antworten:

2 für die Antwort № 1

Ich schlage also folgendes vor, wenn Sie an Ihr Preisschieberegler-Beispiel denken. Hier ist ein Beispiel, wie Benutzer mit nur jQuery nach Namen gesucht werden.

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 wie gewünscht an. 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, nicht als Formular abschicken, weil das deine Seite neu lädt, was du nicht willst.

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

ansichten.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 die zu tun sind:
- irgendeine Art von "Maske" während der Abfragegeholt werden. Kann mit jquery und CSS gemacht werden - Zusätzliche Suchoptionen Wahrscheinlich am besten als mehr Abfragezeichenfolgen in Ihrer Anfrage, die Sie an den Server vornehmen. Zum Beispiel "/ search? Name = Jack & age = 42".