dsi

dsi

by alanbeech

HTML

<script src="http://knockoutjs.com/js/knockout-2.0.0.js"></script>
<p>Span<br/>Here is a value form DSI: <span data-bind="dsi: {role: 'hi mate', updateInterval: 2000}"></span>, isnt that cool!</p>

<p>Div<br/>Here is a value form DSI: <span data-bind="dsi: {role: 'hi mate', updateInterval: 10000}"></span>, isnt that cool!</p>

<p>Div<br/>Here is a value form DSI: <span data-bind="dsi: {role: 'hi mate'}"></span>, isnt that cool!</p>

<br/><br/>
<table>
<tr>
    <td>Gas</td>
    <td data-bind="dsi: {role: 'hi mate'}"></td>
</tr>
<tr>
    <td>Oil</td>
    <td data-bind="dsi: {role: 'hi mate'}"></td>
</tr>
</table>

CSS

body
{
    font-family: Arial;
    font-size:12px;
}

table{
    width: 200px;
}

table td{
    border: solid 1px black;
}
p
{
    margin:5px;
}

JavaScript

var singleValue = {
    value: 123,
    associatedDate: Date()
};

var multipleValues = [{    
    value: 123,
    associatedDate: Date()},
{
    value: 123,
    associatedDate: Date()
}]


ko.bindingHandlers.dsi = {
        
    init: function(element, valueAccessor) {
        var options = valueAccessor() || {};

        // set defaults for non specified
        if(!options.updateInterval) options.updateInterval = 1000;

        if (element.tagName == 'SPAN' || element.tagName == 'TD') {
            $(element).text(singleValue.value);
        }

        window.setInterval(function(){
            var numRand = Math.floor(Math.random()*101)
            singleValue.value = numRand;
            $(element).text(singleValue.value);
        },options.updateInterval);
    }
};

var viewModel = {

};

ko.applyBindings(viewModel);