Technology Corner

Home » DotNet » Asp.Net » Implement Jquery.tmpl (template) with KnockoutJS, Asp.Net Mvc3

Implement Jquery.tmpl (template) with KnockoutJS, Asp.Net Mvc3

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 80 other followers

Twitter updates


RSS InfoQ Feeds

  • First Pedestrian Killed by Self-Driving Car
    A pedestrian was killed on Sunday evening in Tempe, Arizona by a self-driving car operated by Uber, the BBC reports. The firm confirmed that the vehicle was traveling in autonomous mode with a safety driver, the only vehicle occupant, behind the wheel during the crash. By Roland Meertens
  • Microsoft Embeds Artificial Intelligence in Windows 10 Update
    The next Windows 10 update opens the way for the integration of artificial intelligence functionalities within Windows applications. Developers will be able to integrate pre-trained deep-learning models converted to the ONNX framework in their Windows applications. By Alexis Perrier
  • Ankyra Presents “Escape”, a Release Automation Tool that Manages Platforms as Logical Components
    Over the last ten years there has been increased focus on infrastructure as code (IaC) tooling, primarily driven by the rise of Infrastructure as a Service (IaaS) and API-driven infrastructure. InfoQ discussed the challenges of homogenising this tooling with Bart Spaans, founder of Ankyra, who is an expert in the domain of infrastructure and release engineer […]
  • Article: Servlet and Reactive Stacks in Spring Framework 5
    Spring Framework 5 supports both traditional servlet-based and reactive web stacks, in the same server application, reflecting a major shift towards asynchronous, non-blocking concurrency in applications. In this article Spring committer Rossen Stoyanchev explores and contrasts both stacks, and explains the range of available choices, and provides guidance f […]
  • Presentation: Elm and Game Development, a Perfect Fit
    Paulo Diniz discusses the Elm architecture, how to use it as functional reactive programming for web game development. By Paulo Diniz
  • Google Releases “Skaffold”, a Tool That Facilitates Continuous Development with Kubernetes
    Google has released Skaffold, an open source command line tool that facilitates continuous development for Kubernetes applications. Skaffold is entering an increasingly crowded space of Kubernetes development automation tooling, including Azure’s Draft, Datawire’s Forge and Weavework’s Flux. By Daniel Bryant
  • Q&A with Marisa Fagen on Security Championship
    Security lead Marisa Fagen recently spoke at QConLondon 2018 about upskilling and elevating engineering team members into the role of Security Champions. We catch up with Fagen and report on her efforts to address contention caused by a scarcity of security professionals. By Rafiq Gemmail
  • GitHub Licensed Aims to Make it Easier to Comply with OSS Licenses
    GitHub Licensed is an open-source tool that aims to simplify the chore of ensuring license soundness and documentation for all dependencies of a GitHub project. By Sergio De Simone
  • Sauce Labs Adds Analytics and Extended Debugging to Continuous Testing Cloud
    At their recent user conference SauceCon, Sauce Labs introduced new capabilities for its continuous testing cloud including test analytics, featuring a dashboard that analyses test results and exposes common failures by browser and operating system, including Android and iOS. By Helen Beal
  • JavaFX and the Future of Java Client Technologies
    Oracle will remove JavaFX, Applets and Java Web Start from the JDK after Java SE 8. Swing and AWT will remain. By Tim Hodkinson

In continuation of my previous post on search implementation using knockoutjs. In previous example I bind grid with knockoutjs observable array object. Because of observable characteristics, once view model update then knockoutjs engine render html controls which are bound to that view model. I found one problem in it when dealing with huge data.

I had a requirement to show thousands of records in grid without paging. If I use knockoutjs way of binding with html table it takes time to load and browser also popup message about “Unresponsive script” which ask to further render or to stop script.

I wanted to use same view model for data but i didn’t want to use “data-bind” attribute in html. I found one of good plugin of jquery (jQuery.tmpl) through which we can define template and can inject data in runtime. Here I’ll show you how to implement it. I am using same code base which I used in previous post.


How to reproduce error?

Let say I am adding 20000 employees in collection and it will render on UI.


Binding with HTML table:




I get following error message.





Implementation of Jquery.tmpl

To avoid this message and to render data fast I choose jquery.tmpl to render html table.

Here are steps which will define step by step implementation:

Step1 : download Jquery.tmpl.js file from jquery

and save in scripts folder.

You can directly reference script file as well if you want.


Step 2: Reference jquery.tmpl.min.js in relevant page or _layout.cshtml file.


<script src="@Url.Content("~/Scripts/jquery.tmpl.min.js")" 


You can also give direct path from

<script src="" type="text/javascript"></script>


Step 3: Create blank tbody where data will populate.

<tbody id="datalist"></tbody>

Step 4: Create template of <tr> element in which data will render.



Step 4: Populate data in template.




Step 5: Run application.





You can find code here.

1 Comment

  1. Kapil says:

    Can we still utilize knockout custom bindings using this method ? My data needs some edit before being put into the table.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blogs I Follow

%d bloggers like this: