Friday, May 15, 2009

JQuery : Templating using Pure.js

I have tried to use 'chain.js' but it was too slow so I've adopted Pure.js, which is very fast.
I also use the nice tips of John which allows to hide
html parts.
Here is a sample on how I use Pure with JQuery

Here is the link for the lib:
Thanks Mic Cvilic

<html xmlns="">
<head runat="server">

    <script src="../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <script src="../Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
    <script src="../Scripts/pure.js" type="text/javascript"></script>
    <script src="../Scripts/Services.js" type="text/javascript"></script>  

    <button onclick="getProducts();">GetProducts</button>        
    <br />
    <div id="productsList"></div>
    <br />
    <button onclick="decS();">prev 10</button><button onclick="incS();">next 10</button>

   <!-- Scripts -->
    <script type="text/html" id="productsListTemplate">
            <table id="products" border="1"; width="400">
                    <th style="width:100;">ProductID</th>
            <tbody id="tableBody">
    <script type="text/html" id="tableBodyTemplate">
       <tr class="context">
         <td class="ProductID"></td>
         <td class="ProductName"></td>

    <script type="text/javascript" charset="utf-8">
        var s = 0;
        var t = 10;
        var uriProducts = "ClientBin/DataService.axd/InfoCentreV01-Web-ProductService/GetProducts?";
        var tableBodyTemplate = $("#tableBodyTemplate").html();
        var prdtTemplate = $("#productsListTemplate").html();

        function incS() {
            s = s + 10;

        function decS() {
            if (s > 1) {
                s = s - 10;
        function getProducts() {
            var uri = uriProducts + "s=" + s + "&t=" + 10;
            $.getJSON(uri, function(products) {
                var context = products.Results;



  1. Dear Sir,

    I hope you are doing well. I got this email address from one of your contribution web site. I have launched a web site and it is basically aimed C#,JAVA,VB.NET,ASP.NET,AJAX,Sql Server,Oracle,WPF,WCF and etc resources, programming help, articles, code snippet, video demonstrations and problems solving support. I would like to invite you as an author and a supporter.
    Looking forward to hearing from you and hope you will join with us soon.

    Thank you

  2. Hi Salvatore,

    Thank you very much for the post.

    I didn't know the script tag trick to hide HTMLs, I'll use it for sure.
    A pitty the src attribute doesn't work, this would have been a great way to dynamically load templates.

    Do you mind adding a link to the web site of the lib? If some people are interested to know more about it


  3. This comment has been removed by a blog administrator.