Easy HTML Templating with JQuery

2009-12-07T10:09:00Z

I have been wanting to write a blog about this for a while and my first post on Devlicious is the perfect place. Firstly I have to thank Jess Chadwick for his help with this when I first started out with the Bundl.it project. Working with ASP.NET MVC has been wonderous, but when I was first starting out I was confused how I would replicate some of the behavior I was used to on my heavy server controls.

I wanted my page to be quick, and to do this I wanted only the amount of HTML I needed to display to be on the page. When I was using webforms I would probably do this with a repeater, but using MVC I thought dynamically generating the HTML was the way to go.

Your first step is creating your template; your template is the HTML that gets added to the page on user action. You want it to be hidden; throwing it in a script tag is a good way to do this. You need to give it an ID that can be referenced in your code. You can create multiple templates as well. I am dynamically creating an unordered list.

My template looks like this:

</li>

</script>

Now within my code I need to put a place holder where I want my HTML to go. I have my unordered list called url_list.

Now, you see that most of my items look like this “|rowNumber|” I have a variable in my code called nextUniqueItemID (I believe in extremely descriptive variable names). Here is my “addItem” function. I am calling this on user button click, you can interpret it how you like.

function addItem() {

var list = $('#url_list'),

items = list.find('li');

list.append($('#ItemTemplate’)

.html().replace(/\|rowNumber\|/gi, nextUniqueItemID++));

}

The first thing it does is find my unordered list using the ID selector. Then the append function locates my template using the same selector and adds it to the html inside the url_list. It also replaces the rowNumber with the nextUniqueItemID, that way when I can reference this particular input when submitting my form. That's it! It's that easy and it's a great way to generate quick html on the fly.

Sara Chipps

Easy HTML Templating with JQuery