Knockout Template - Test

Knockout Template

by gurkavcu

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<table data-bind="template : { name: 'tableHeaderTmpl' , data : table }"></table>

<script type="text/x-jquery-template" id="tableHeaderTmpl">
  <thead>
     <tr data-bind="foreach:headItems">
        <th data-bind="text:$data"></th>
    </tr>       
  </thead>
  <tbody data-bind="template : {name:'tableBodyTmpl', foreach:rowsData}"></tbody>
</script>

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

CSS

table {
  border-collapse: separate;
  border-spacing: 1px;
  *border-collapse: expression('separate', cellSpacing = '1px');
}



table,td,th {
    border:1px solid black;
    text-align:center
}

th {
    
    background-color:black;
    color:white;
}

td {
    
    width:50px;
}

JavaScript

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).effect('highlight', {
                    color: '#AA0000'
                }, 1000);
            } else if (current>old ) {
                 $(element).effect('highlight', {
                    color: '#00AA00'
                }, 1000);               
            }
        }
        else {
            $(element).data("ko_init", true);
        }
    }
};

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

    var self = this;

    var Cell = function(data, css, animate) {

        var cellInstance = this;

        this.data = ko.observable(data);
        this.css = ko.observable(css);
        this.animate = ko.observable(animate);

    }

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

    if (initiliaze) {

        for (var i = 0; i < rowCount; i++) {
            var tmpArray = new Array();
            for (var j = 0; j < columnCount; j++)
            tmpArray.push(new Cell("0", "", ""));
            self.rowsData.push(ko.observableArray(tmpArray));
        }
    }

}

function ViewModel() {
    var self = this;

    this.table = new Table(5, 4, ["Name", "DT", "BID", "ASK"], true);

};

$(function() {

    var viewModel = new ViewModel();
    ko.applyBindings(viewModel);

    function changeData(x, y, data) {

        viewModel.table.rowsData()[x]()[y].data(data);

    }
    setInterval(function() {
        changeData(parseInt(Math.random(1000) * 5, 10), parseInt(Math.random(1000) * 4, 10), parseInt(Math.random(1000) * 10000, 10));

    }, 1000);
})