CODEWITHSUNDEEP
javascripthtmldjangotemplates
Olshansky
Olshansky

Reputation: 6404

Django - Append a reusable template from javascript

I'm currently reusing a template to populate a list using the code below:

<li>
    {% include "ding/search_result.html" with title=field.title url=field.url description=field.description %}
</li>

When new data comes in, I want to be able to add new elements to my list dynamically from javascript. I can use the code below to add new list items:

$("ul.search-results-list").append('<li>New List Item</li>')

Is there a way for me to append the reusable template code I'm using, and pass in the appropriate parameters?

Upvotes: 1

Views: 350

Answers (1)

Henrik Andersson
Henrik Andersson

Reputation: 47172

Yes there is! AND you get to refactor your APIs as well.

Imagine that you have an API that returns this json blob for every new list item.

{
    name: "limelights"
}

And let's just use jQuery for this (even though I kinda don't want to.) So you query the API like this

$.getJSON('api/v1/getName.json', {'someParameter', 123}, function() {
   //this is where you would do your rendering then.
});

So how to do the rendering? Well, I'm a huge fan of underscore.js and it's rendering of templates, so I'm gonna go ahead and use that (but you can exchange it for Mustasche, Handlebars, Hogan or whatever you fancy).

First, we'll define a script template like this: (We're using underscore.js own ERB style template language).

<script type="text/template" id="my_fancy_list">
    <li><%= name %></li>
</script>

Now this can live pretty much anywhere, either in your template or you can require it in if you're using Require.JS but we're gonna assume that it lives in your template (Hint: it could be rendered by some Django template tag)

Anyhoo,

Fill this template with data now:

var template = _.template($('script#my_fancy_list').html());
//this will give you the template as a javascript function.

//Query the API

$.getJSON('api/v1/getName.json', {'startsWith': 'l'}, function(data) {
    $('ul.search-results-list').append(template(data));
});

And presto, you now have an JavaScript driven application that renders new data that comes from the server without fetching the entire template and render it all again.

Upvotes: 3

Related Questions