Question

Couldnt find any example on grouping using jquery tmpl() so thought id post what I came up with (that works) in case anyone else was trying to do it.

Answer 1

See the JQuery API docs for the basic usage of templates.

I’ve written an extension to this function, which allows multiple categories to be grouped.
Usage:

$(JQuery template).tmpl_sort(data,[options,] array of groups)
  •   For JQuery template, data and options, see the tmpl API documentation.
  •   array of groups should be an array consisting of strings which identify the groups.

Code:

 (function($){
     $.fn.tmpl_sort = function(data, options_or_groups, array_groups){
         return $.tmpl_sort(this, data, options_or_groups, array_groups);
     }
     $.tmpl_sort = function(template, data, options_or_groups, array_groups){
         if(typeof array_groups == "undefined"){
             array_groups = options_or_groups;
             options_or_groups = void 0;
         }
         array_groups = typeof array_groups == "string" || typeof array_groups == "number" ? [array_groups] : array_groups;
         if(!(array_groups instanceof Array)) throw new TypeError("$.fn.tmpl_sort: second argument has to be a string or array");
         var groups = {};
         for(var i=0; i<array_groups.length; i++){
             (function(groupname){
                 var last;
                 groups[groupname] = function(group){
                     /* === is a strict comparison operator */
                     return last === (last=group);
                 }
             })(array_groups[i]);
         }
         return template.tmpl(data, groups, options_or_groups)
     }
  })(jQuery);

Example at http://jsfiddle.net/gBTzU/

var Leagues = [
     { League: 1, Group: "A", Team: "France" },
     { League: 1, Group: "A", Team: "China" },
     { League: 1, Group: "B", Team: "Brazil" },
     { League: 2, Group: "A", Team: "England" },
     { League: 2, Group: "A", Team: "Scotland" },
     { League: 2, Group: "B", Team: "India" }
 ];
 $("#itemtemplate").tmpl_sort(Leagues, ["sameleague", "samegroup"]).appendTo("#lvList");