Best Practice für das Rendern von Daten in HTML mit Ajax

Question

Ich versuche, einige Details eines Artikels in einigen bereits definierten div zu öffnen. Ich habe 2 Möglichkeiten, das zu tun.

Hinweis: Ich verwende Python/Django als Backend und Frontend jquery in

I. Mein erster Weg

Views.py

def get_item_data(id): 
    obj = MyClass.objects.get(pk=id) 
    html = """ 
       <div>All Details Here, 1. {0}, 2. {1}</div> 
      """.format(str(obj.id), str(obj.name)) 

    return HttpResponse(html) 

myapp.js

$('#myid').on('click', function(){ 
    $.ajax({ 
     type: "GET", 
     url: GET_DATA, 
     data: dataString, 
     success: function(res) { 
       $('#addl_container').html(res); 
     } 
    }); 
}); 

II. Der andere Weg

Views.py

def get_item_data(id): 
    obj = MyClass.objects.filter(pk=id).values() 
    return HttpResponse(simplejson.dumps(obj)) 

myapp.js

$('#myid').on('click', function(){ 
    $.ajax({ 
     type: "GET", 
     url: GET_DATA, 
     data: dataString, 
     success: function(res) { 
       $('#addl_container').html(
        "<div>All Details Here, 1. "+ res.id +", 2. "+ res.name + "</div>" 
       ); 
     } 
    }); 
}); 

Beide der Prozess funktioniert. Ich dachte, das Erstellen des HTML im Voraus und das Laden ist möglicherweise keine gute Wahl, da wir Python-Code verwenden, um das HTML zu erstellen und dann zu laden. Es wird auch nicht funktionieren, wenn ich versuche, von einer anderen Anwendung auf dieselbe URL zuzugreifen. Das Erstellen des HTML aus jQuery durch Extrahieren von Daten aus der JSON-Antwort scheint eine gute Lösung zu sein, aber manchmal, wenn die Daten riesig sind, benötigt es mehr RAM am Ende des Benutzers, was das System verlangsamt.

Ich bin verwirrt, welche zu verwenden, bitte vorschlagen eine bessere Lösung aus diesen beiden. Schlagen Sie auch andere Lösung besser als diese vor?

Vielen Dank im Voraus.

Answer 1

Ich bevorzuge es, die Vorlage, Geschäft und js Logik so viel wie möglich zu trennen. Es hält es mehr Python und mehr innerhalb der Django-Design-Prinzipien. Dies ist in der Tat sehr ähnlich zu Ihrer ersten Methode, aber verwendet eine HTML-Vorlage, anstatt HTML auf eine Zeichenfolge in Ihrer Ansicht zu drucken.

views.py

def get_item_data(id): 
    template_name = 'index.html' 
    obj = MyClass.objects.get(pk=id) 
    context = { 
     'obj': obj, 
    } 
    html = render_to_string(template_name, context) 
    return HttpResponse(html) 

index.html

<h1>{{ obj }}</h1> 

myapp.js

$('#myid').on('click', function(){ 
    $.ajax({ 
     type: "GET", 
     url: GET_DATA, 
     data: dataString, 
     success: function(res) { 
      $('#addl_container').html(res); 
     } 
    }); 
}); 

Answer 2

sehr groben Entwurf, von dem, was ich wirklich, das ist Lenker:

in Django Vorlage. Kopf:

<!--Handlebar templates start--> 
{% include "app/mydiv.handlebars.html" %} 
<!--Handlebar templates end--> 

app/mydiv.handlebars.html

{% verbatim %} 
<script id="template-myapp-my-div" type="text/x-handlebars-template"> 
<div>All Details Here, 1.{{res.id}} res.id, 2. {{res.name}}</div> 
</script> 
{% endverbatim %} 

So etwas wie dies in JS:

_success = function(json_data_from_response) { 
var templateSource = $("#template-myapp-mydiv").html(); 
if (!templateSource) { 
    $("#errors").html("template-myapp-mydiv:error:no template found"); 
    return; 
} 
// you could compile ahead of time elsewhere or cache the compile. 
var template = Handlebars.compile(templateSource); 

// now merge your incoming data. 
var myhtml = template(json_data_from_response); 
$("#addl_container").html(myhtml); 
); 

ich nicht in den Lenker ging Details Templating, aber sie sind 80% ähnlich wie Django-Vorlagen, minus den Tag und Filter, so Du solltest es leicht genug machen.

Ein zusätzlicher Vorteil der Verwendung von Handlebars ist, dass es im Client Sprintf/Python-String-Substitutionen bereitstellen kann. Art von Schwergewicht für diesen Zweck, aber wenn Sie es trotzdem haben ...

//compute an actual url on the fly from a template (i.e. depending on 
//what the user clicked on, I compute what to fetch) 

var _url = _settings.url_details_base; 
var t_url = Handlebars.compile(_url); 
var url = t_url({"CREF": CREF,"rdbname" : rdbname}); 

//do something with url, like an Ajax call.