knockout observables

by Artem Baguinski

HTML

<h3 id="aantal">Aantal: 
    <span class="num" data-bind="text: aantal">AANTAL</span> 
    <div class="block" data-bind="style: {
        width: Math.round(aantal()*200) + 'px'        
    }"></div> 
</h3>

<button data-bind="click: aantal( Math.random() )">
    verander
</button>

<h3 id="budget">Budget: 
    <span class="num" data-bind="text: budget">BUDGET </span>
    <div class="block" data-bind="style: {
        width: Math.round(budget()*200) + 'px'        
    }"></div>
</h3>

<button data-bind="click: function() { budget( Math.random() ); }">
    verander
</button>

CSS

.block {
    background: red; 
    height: 3px;
}

JavaScript

var appViewModel = {
    aantal: ko.observable(0.42),
    budget: ko.observable(0.10),    
};

ko.applyBindings(appViewModel);