Knockout Table & Highlight Example

Knockout Template

by gurkavcu

HTML

<script type="text/x-jquery-template" id="widgetTmpl">
  <table>
  <thead>
     <tr>
        <td class="titles" colspan="11">
            <label class="tableHeaderWrapper">
                <label style="width:50px;" class="headerItemWrapper leftAlign">
                     <h4 data-bind="text:title"></h4>
                </label>
                <label class="headerItemWrapper rightAlign">            
                    <a href="#help" rel="popup_name1" class="poplight headerImgLink">
                        <img width="12" height="11" src="Content/Images/questionwhite.png" alt="question" id="930-RADWZ">
                    </a>
                    <a href="#delWid" rel="popup_name1" class="poplight headerImgLink">
                        <img width="12" height="11" onclick="deleteDashboardWidget(this)" alt="close" src="Content/Images/closewhite.png" class="deleteWidget" id="930-RADWZ">
                    </a>    
                    <a href="#curDD" rel="popup_name1" class="poplight headerImgLink">            
                        <div onclick="jsddm_open(this);" id="currencyButton">
                            <img style="cursor:pointer;" alt="gear" src="../Content/images/icon_gear.png">
                            ***
                        </div>
                    </a>
                </label>
            </label>
        </td>
    </tr>
     <tr class="title" data-bind="foreach:headItems">
        <th data-bind="text:$data"></th>
    </tr>       
  </thead>
  <tbody data-bind="template : {name:'tableBodyTmpl', foreach:rowsData} ,stripe: $data, oddClass: 'darker', evenClass: 'ligther'"></tbody>
</table>
</script>

<script type="text/x-jquery-template" id="tableBodyTmpl">
    <tr data-bind="foreach:$data">
        <td data-bind="highlight:data,text:data"></td>
    </tr>
</script>

<div id="container">
</div>

CSS

/*a {
color:#666;
text-decoration:none;
font-weight:700;
outline:none;
}*/
a {color: #666;text-decoration: none;outline: none; font-weight:bold;}
a:hover {
color:#333;
text-decoration:underline;
}
a:visited {color: #666;}


strong,b {
font-weight:700;
}

p {
font-size:12px;
line-height:22px;
margin-top:20px;
margin-bottom:10px;
}

h1 {
font-size:24px;
line-height:44px;
font-weight:700;
margin-bottom:0;
padding-left:10px;
}

h2 {
font-size:18px;
line-height:40px;
font-weight:700;
margin-top:0;
margin-bottom:0;
}

h3 {
font-size:16px;
line-height:22px;
font-weight:700;
margin-top:0;
margin-bottom:0;
}

h4 {
font-size:14px;
line-height:26px;
font-weight:700;
margin-top:0;
margin-bottom:0;
}
table.width-1 h4 {
line-height:21px;
    width: 130px;
    height: 22px;
    overflow: hidden;
    font-size:12px;
}
table.width-2 h4 {
line-height:21px;
    width: 200px;
    height: 22px;
    overflow: hidden;
}
h4.alert {
font-size:14px;
line-height:26px;
font-weight:700;
text-align:center;
margin:0 0 15px;
padding:20px;
}

h4.alertset {
color:#7a7a7a;
text-align:center;
}

h5 {
font-size:12px;
line-height:22px;
font-weight:700;
margin-top:0;
margin-bottom:0;
}

h5.ratecolor {
line-height:16px;
color:#fff;
}

h6 {
font-size:10px;
line-height:18px;
font-weight:700;
margin-top:0;
margin-bottom:0;
}

img {
border:0;
margin:0;
padding:0;
}

/*.button {
background-color:#79A4D0;
height:20px;
border:none;
cursor:pointer;
color:White;

-webkit-border:3px;
-moz-border-radius:3px;
border-radius:3px;

box-shadow:1px 1px 4px rgba(0,0,0,0.3);
}
.button:hover {
text-decoration:underline;
box-shadow:1px 1px 4px rgba(0,0,0,0.5);
}*/

.button{background: url(Images/submit.png) left top scroll no-repeat;height:29px; width:100px; border:none;cursor:pointer;}
.button:hover{background: url(Images/submitactive.png) left top scroll no-repeat;}
input.button{background: url(Images/submit.png) left top scroll no-repeat;height:29px;width:100px; border:none;...

JavaScript

//jQuery.fx.off = true;
ko.bindingHandlers.stripe = {
    update: function(element, valueAccessor, allBindingsAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()), //creates the dependency
            allBindings = allBindingsAccessor(),
            even = allBindings.evenClass,
            odd = allBindings.oddClass,
            $el = $(element);
console.log($(element));
        //update odd rows
        $el.children(":nth-child(odd)").addClass(odd).removeClass(even);
        //update even rows
        $el.children(":nth-child(even)").addClass(even).removeClass(odd);;
    }
};

ko.bindingHandlers.highlight = {
    update: function(element, valueAccessor) {
        ko.toJS(valueAccessor());
        var old = parseInt($(element).html(), 10);
        var current = parseInt(valueAccessor()(), 10);
        if ($(element).data("ko_init")) {
             
            if (current < old) {
               // $(element).clearQueue();
                $(element).css("background-color","#AA0000");
                $(element).delay(5000).animate({'duration':0,'backgroundColor' : '#ffffff'});
            } else if (current >= old) {
               // $(element).clearQueue();
                $(element).css("background-color",'#00AA00');
                $(element).delay(5000).animate({'duration':0,'backgroundColor' : '#ffffff'});
            }
            
        }
        else {
            $(element).data("ko_init", true);
        }
    }
};

function Table(rowCount, columnCount, headItems, title, id, initiliaze) {

    var self = this;

    var Cell = function(data, css) {

        var cellInstance = this;
        
        this.data = ko.observable(data);
        this.css = ko.observable(css);

    }

    this.rowCount = ko.observable(rowCount);
    this.columnCount = ko.observable(columnCount);
    this.title= ko.observable(title);
    this.id = ko.observable(id);
    this.headItems = ko.observableArray(headItems);
    this.rowsData =...