Implement Jquery.tmpl (template) with KnockoutJS, ASP.NET MVC 3

In continuation of my previous post on search implementation using knockoutjs. In the previous example I showed how to bind a grid with the KnockoutJS observable array object. Because of observable characteristics, once the view model updates the knockoutjs engine renders HTML controls which are bound to that view model. I found one problem with it when dealing with huge data.

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

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

How to reproduce the error?

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

Binding with the HTML table:

I get the following error message.

Solution:

Implementation of Jquery.tmpl

To avoid this message and to render data fast I chose jquery.tmpl to render the HTML table. Here are the steps which will define the implementation:

Step1: Download the Jquery.tmpl.js file from jquery

http://github.com/jquery/jquery-tmpl

http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js

and save in the scripts folder. You can directly reference the script file as well if you want.

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

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

You can also give the direct path from

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript"></script>

Step 3: Create a blank tbody where data will populate.

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

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

Step 4: Populate data in the template.

Step 5: Run the application.

You can find the code here.