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:
http://beebole.com/pure
Thanks Mic Cvilic



<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <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>  

</head>
<body>
    <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">
            <thead>
                <tr>
                    <th style="width:100;">ProductID</th>
                    <th>ProductName</th>
                </tr>
            </thead>
            <tbody id="tableBody">
            </tbody>
        </table>
    </script>
    <script type="text/html" id="tableBodyTemplate">
       <tr class="context">
         <td class="ProductID"></td>
         <td class="ProductName"></td>
       </tr>
    </script>    

    <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();
        $("#productsList").html(prdtTemplate);


        function incS() {
            s = s + 10;
            getProducts()
        }

        function decS() {
            if (s > 1) {
                s = s - 10;
            }
            getProducts();
            
        } 
        
        function getProducts() {
            var uri = uriProducts + "s=" + s + "&t=" + 10;
            $.getJSON(uri, function(products) {
                var context = products.Results;
                $("#tableBody").html('');
                $("#tableBody").html(tableBodyTemplate);
                $('#products').autoRender(context);
                
            });
        }            
    </script>  

</body>
</html>

3 comments:

  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 www.codegain.com 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
    RRaveen
    Founder CodeGain.com

    ReplyDelete
  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
    http://beebole.com/pure

    Cheers,
    Mic

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

    ReplyDelete