Knockoutjs.com - Hello World Example

http://knockoutjs.com/examples/helloWorld.html

by dirtyd77

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<div class='liveExample'>   
    <p>Open: <span data-bind='text: open'></span></p> 
    <p>High: <span data-bind='text: high'></span></p> 
    <p>Low: <span data-bind='text: low'></span></p> 
    <p>Close: <span data-bind="css: { greater : closeGreater() ==='greater',
        less : closeGreater() ==='less', same : closeGreater() ==='same'
     }, text: close"></span></p> 
    
    <h2><span data-bind="text: closeGreater"></span></h2>  
</div>

CSS

.greater{ color: green; }
.less { color: red; }
.same { color: purple;}
body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; font-weight: bold; font-size: 1.2em; }

JavaScript

var counter = 0,
    ViewModel = function(o, h, l, c) {
    var _this = this;
     
    _this.open = ko.observable(o);
    _this.high = ko.observable(h);
    _this.low = ko.observable(l);
    _this.close = ko.observable(c);
        
        
 
    _this.closeGreater = ko.computed(function() {
        if(_this.close() > _this.open()){
            return 'greater';
        }
        else if(_this.close() < _this.open()){
            return 'less';
        }
        return 'same';
    }, _this);
        
        setInterval(function(){
            _this.open(_this.open() + 1);
            counter++;
        }, 2000);
};
 
ko.applyBindings(new ViewModel(75, 95, 70, 82));