Creating Reusable jQuery Templates in Visual Studio

Creating Reusable jQuery Templates in Visual Studio

JQuery, the open source, cross-browser JavaScript library, simplifies event handling, animations and general development of responsive Web applications. The official jQuery Web site states: “JQuery is designed to change the way that you write JavaScript.” Released in 2006 by John Resig, jQuery has since become very popular for its versatility, ease of use and numerous plugins, which extend the jQuery library.

The key features of jQuery include:

  • Browser independence: jQuery is supported by most browsers.
  • Simplified event handling model: The excellent, easy-to-use jQuery event handling model minimizes code and is consistent across all browsers. The event object is cross-browser and normalized, and one event object is always passed as a parameter to an event handler.
  • Seamless extensibility: JQuery supports extensibility through an easy to use plugin API.

Getting Started with jQuery

To get started with jQuery, you should have the following installed in your system:

  • Visual Studio 2008
  • Visual Studio 2008 SP1
  • jQuery Library
  • Visual Studio 2008 jQuery Plug-in

Alternatively, you can acquire Visual Studio 2010, which comes with the jQuery library by default. To use jQuery, you can simply drag and drop the script onto your web form in the markup mode. Here’s the markup code that is generated:

    

Creating and Using jQuery Templates

The jQuery.template(name,template) method is used to create a reusable template. The first parameter is a string that indicates the compiled template. The second parameter is the HTML markup and/or the text to be used as a template. The jQuery official site states: “This method compiles the markup in the template parameter as a named template, which can be referenced using the string specified in the name parameter.”

To implement the jQuery templating plugin, you need to include the jQuery scripts as shown below:

  

Note that both jQuery 1.4.4 and jQuery Templates can be downloaded from Microsoft Ajax Content Delivery Network. Also, notice the usage of the script tag with a special MIME type.

The next step is creating a template using jQuery. Here is an example:

Next, create some data to render. Here is an example:

  var employees = [            { Name: "Peter Sanders", "E001" },            { Name: "Joydip Kanjilal", "E002" },            { Name: "Steve Mitch", "E003" },            { Name: "Peter Dan", "E004" }, { Name: "Jim Kanjilal", "E005" },        ];

The Complete jQuery Template Source Code

The following plugin script illustrates how you can display a list of employees stored in a JavaScript array:

    

Employee Records

Defining a jQuery Template Externally

You can also define a template externally and use it in your markup code. To do this, you should define a template in a data file. For example, you could create the following data file and name it EmployeeTemplate.htm:

Hello, ${empname}.

Then you can define the employee object as shown below:var employees = { empname: 'Joydip' };

You could then load the external template stored in the external file (EmployeeTemplate.htm) using the $.get() method and then render the external template using jQuery templates. Here is how to do that:

$.get('EmployeeTemplate.htm', function(template) {   $.tmpl(template, employee).appendTo('body');});

Summary

JQuery is a simple, light-weight and fast JavaScript library that has simplified the way you write your scripts. In this article we discussed the features of jQuery and how we can work with the jQuery templates. We also discussed how we can create and use jQuery templates in your application.

References

  • jQuery Templates intro by Stephen Walther
  • jQuery Templates Plugin Documentation
  • jQuery Templates and Data Linking blog by Scott Guthrie
  • devx-admin

    devx-admin

    Share the Post:
    Poland Energy Future

    Westinghouse Builds Polish Power Plant

    Westinghouse Electric Company and Bechtel have come together to establish a formal partnership in order to design and construct Poland’s inaugural nuclear power plant at

    EV Labor Market

    EV Industry Hurting For Skilled Labor

    The United Auto Workers strike has highlighted the anticipated change towards a future dominated by electric vehicles (EVs), a shift which numerous people think will

    Soaring EV Quotas

    Soaring EV Quotas Spark Battle Against Time

    Automakers are still expected to meet stringent electric vehicle (EV) sales quotas, despite the delayed ban on new petrol and diesel cars. Starting January 2023,

    Affordable Electric Revolution

    Tesla Rivals Make Bold Moves

    Tesla, a name synonymous with EVs, has consistently been at the forefront of the automotive industry’s electric revolution. The products that Elon Musk has developed

    Poland Energy Future

    Westinghouse Builds Polish Power Plant

    Westinghouse Electric Company and Bechtel have come together to establish a formal partnership in order to design and construct Poland’s inaugural nuclear power plant at the Lubiatowo-Kopalino site in Pomerania.

    EV Labor Market

    EV Industry Hurting For Skilled Labor

    The United Auto Workers strike has highlighted the anticipated change towards a future dominated by electric vehicles (EVs), a shift which numerous people think will result in job losses. However,

    Soaring EV Quotas

    Soaring EV Quotas Spark Battle Against Time

    Automakers are still expected to meet stringent electric vehicle (EV) sales quotas, despite the delayed ban on new petrol and diesel cars. Starting January 2023, more than one-fifth of automobiles

    Affordable Electric Revolution

    Tesla Rivals Make Bold Moves

    Tesla, a name synonymous with EVs, has consistently been at the forefront of the automotive industry’s electric revolution. The products that Elon Musk has developed are at the forefront because

    Sunsets' Technique

    Inside the Climate Battle: Make Sunsets’ Technique

    On February 12, 2023, Luke Iseman and Andrew Song from the solar geoengineering firm Make Sunsets showcased their technique for injecting sulfur dioxide (SO₂) into the stratosphere as a means

    AI Adherence Prediction

    AI Algorithm Predicts Treatment Adherence

    Swoop, a prominent consumer health data company, has unveiled a cutting-edge algorithm capable of predicting adherence to treatment in people with Multiple Sclerosis (MS) and other health conditions. Utilizing artificial

    Personalized UX

    Here’s Why You Need to Use JavaScript and Cookies

    In today’s increasingly digital world, websites often rely on JavaScript and cookies to provide users with a more seamless and personalized browsing experience. These key components allow websites to display

    Geoengineering Methods

    Scientists Dimming the Sun: It’s a Good Thing

    Scientists at the University of Bern have been exploring geoengineering methods that could potentially slow down the melting of the West Antarctic ice sheet by reducing sunlight exposure. Among these

    why startups succeed

    The Top Reasons Why Startups Succeed

    Everyone hears the stories. Apple was started in a garage. Musk slept in a rented office space while he was creating PayPal with his brother. Facebook was coded by a

    Bold Evolution

    Intel’s Bold Comeback

    Intel, a leading figure in the semiconductor industry, has underperformed in the stock market over the past five years, with shares dropping by 4% as opposed to the 176% return

    Semiconductor market

    Semiconductor Slump: Rebound on the Horizon

    In recent years, the semiconductor sector has faced a slump due to decreasing PC and smartphone sales, especially in 2022 and 2023. Nonetheless, as 2024 approaches, the industry seems to

    Elevated Content Deals

    Elevate Your Content Creation with Amazing Deals

    The latest Tech Deals cater to creators of different levels and budgets, featuring a variety of computer accessories and tools designed specifically for content creation. Enhance your technological setup with

    Learn Web Security

    An Easy Way to Learn Web Security

    The Web Security Academy has recently introduced new educational courses designed to offer a comprehensible and straightforward journey through the intricate realm of web security. These carefully designed learning courses

    Military Drones Revolution

    Military Drones: New Mobile Command Centers

    The Air Force Special Operations Command (AFSOC) is currently working on a pioneering project that aims to transform MQ-9 Reaper drones into mobile command centers to better manage smaller unmanned

    Tech Partnership

    US and Vietnam: The Next Tech Leaders?

    The US and Vietnam have entered into a series of multi-billion-dollar business deals, marking a significant leap forward in their cooperation in vital sectors like artificial intelligence (AI), semiconductors, and

    Huge Savings

    Score Massive Savings on Portable Gaming

    This week in tech bargains, a well-known firm has considerably reduced the price of its portable gaming device, cutting costs by as much as 20 percent, which matches the lowest

    Cloudfare Protection

    Unbreakable: Cloudflare One Data Protection Suite

    Recently, Cloudflare introduced its One Data Protection Suite, an extensive collection of sophisticated security tools designed to protect data in various environments, including web, private, and SaaS applications. The suite

    Drone Revolution

    Cool Drone Tech Unveiled at London Event

    At the DSEI defense event in London, Israeli defense firms exhibited cutting-edge drone technology featuring vertical-takeoff-and-landing (VTOL) abilities while launching two innovative systems that have already been acquired by clients.

    2D Semiconductor Revolution

    Disrupting Electronics with 2D Semiconductors

    The rapid development in electronic devices has created an increasing demand for advanced semiconductors. While silicon has traditionally been the go-to material for such applications, it suffers from certain limitations.

    Cisco Growth

    Cisco Cuts Jobs To Optimize Growth

    Tech giant Cisco Systems Inc. recently unveiled plans to reduce its workforce in two Californian cities, with the goal of optimizing the company’s cost structure. The company has decided to

    FAA Authorization

    FAA Approves Drone Deliveries

    In a significant development for the US drone industry, drone delivery company Zipline has gained Federal Aviation Administration (FAA) authorization, permitting them to operate drones beyond the visual line of

    Mortgage Rate Challenges

    Prop-Tech Firms Face Mortgage Rate Challenges

    The surge in mortgage rates and a subsequent decrease in home buying have presented challenges for prop-tech firms like Divvy Homes, a rent-to-own start-up company. With a previous valuation of

    Lighthouse Updates

    Microsoft 365 Lighthouse: Powerful Updates

    Microsoft has introduced a new update to Microsoft 365 Lighthouse, which includes support for alerts and notifications. This update is designed to give Managed Service Providers (MSPs) increased control and

    Website Lock

    Mysterious Website Blockage Sparks Concern

    Recently, visitors of a well-known resource website encountered a message blocking their access, resulting in disappointment and frustration among its users. While the reason for this limitation remains uncertain, specialists