Wednesday, September 3, 2014

How to use jquery template

Jquery template is client side data binding. jQuery Templates enable you to display and manipulate data in the browser. its increase in client processing capabilities. This approach became popular today and various company used own template such as kendo ui, angular js, backbone js etc
Using templates allow you to keep a lot of escaped markup outside of Javascript code. Most Javascript solutions now use the technique .you put the template markup inside a script tag with a type attribute set to text/html (or some other content-type unrecognized by the browser text/tmpl, text/jstmpl, whatever).So it minimize amount of code and  increase the performance of client side processing . I have created the basic functionality to use tem plate . I have bind the employee detail in template as given below
<ul id=" dataList"></ul> //display date this ul


<script id="empDetail" type="text/x-jquery-tmpl"> //Jquery template syntax
        <li>
              <b>${Name}</b> (${Salary})
          </li>
        </script>



<script type="text/javascript"> //jquery bind the template

        var Employee = [
            { Name: "Anil Sharma", Salary: "2000" },
            { Name: "Niraj Gupta", Salary: "4000" },
            { Name: "Narender", Salary: "6000" }
        ];

        $("#empDetail").tmpl(Employee)
            .appendTo("#dataList");

</script>

No comments:

Post a Comment

http://blogsiteslist.com