JsRender Fundamentals - Module 5 - Tag - Sort Function

HTML

<script src="http://borismoore.github.com/jsrender/jsrender.js"></script>
<div class="boxed">
    <b>Original Order</b>
    <ul id="target1"></ul>
</div>
<div class="boxed">
    <b>Sort Order</b>
    <ul id="target2"></ul>
</div>
<div class="boxed">
    <b>Reverse Sort Order</b>
    <ul id="target3"></ul>
</div>

CSS

.boxed{
    float: left;
    margin:20px;
    width:150px;
}

JavaScript

$.views.tags({
    sort: function(array) {
        var ret = "",
            tag = this;
        
        var sortFunction = (function(a, b) {
            var lnameA = a.lastName.toLowerCase(),
                lnameB = b.lastName.toLowerCase(),
                fnameA = a.firstName.toLowerCase(),
                fnameB = b.firstName.toLowerCase();
            var val = lnameA < lnameB ? -1 : lnameA > lnameB ? 1 : 0;
            if(val === 0){
                val = fnameA < fnameB ? -1 : fnameA > fnameB ? 1 : 0;
            }
            return val;
        })

        var sortedArray = array.sort(sortFunction);

        if (tag.props.reverse) {
            for (var i = sortedArray.length - 1; i >= 0; i--) {
                ret += tag.renderContent(sortedArray[i]);
                //ret += tag.tmpl.render(sortedArray[i]);
            }
        }
        else {
            // Render in ascending order
            ret += tag.renderContent(sortedArray);
            //ret += tag.tmpl.render(sortedArray);
        }
        return ret;
    }
});

var data = {
    people: [
        {
        firstName: 'Ella',
        lastName: 'Papa'},
    {
        firstName: 'John',
        lastName: 'Papa'},
    {
        firstName: 'Boris',
        lastName: 'Moore'},
    {
        firstName: 'Colleen',
        lastName: 'Papa'},
    {
        firstName: 'Bill',
        lastName: 'Gates'},
    {
        firstName: 'Scott',
        lastName: 'Guthrie'}
    ]
};

var original = '{{for people}}<li>{{:firstName}} {{:lastName}}</li>{{/for}}',
    sorted = '{{sort people reverse=false}}<li>{{:firstName}} {{:lastName}}</li>{{/sort}}',
    reversed = '{{sort people reverse=true}}<li>{{:firstName}} {{:lastName}}</li>{{/sort}}';

$.templates({
    'tmplOriginal': original,
    'tmplSorted': sorted,
    'tmplReversed': reversed
});


$('#target1').html($.render.tmplOriginal(data));
$('#target2').html($.render.tmplSorted(data));
$('#target3').html($.render.tmplReversed(data));