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

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.


One thought on “Implement Jquery.tmpl (template) with KnockoutJS, Asp.Net Mvc3

Add yours

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

Powered by

Up ↑

%d bloggers like this: