Django - Append a reusable template from javascript

Question

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?

Henrik Andersson · Accepted Answer · 2013-10-20 17:57:21Z

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.

This is exactly what I needed! Thanks alot for the fast and detailed response.

Collectives™ on Stack Overflow

Django - Append a reusable template from javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related