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: aantalWidth }">
    </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: budgetWidth }">
    </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),
};

appViewModel.aantalWidth = ko.computed(calcWidth, appViewModel.aantal);
appViewModel.budgetWidth = ko.computed(calcWidth, appViewModel.budget);

ko.applyBindings(appViewModel);

function calcWidth() {
    // 'this' is een observable met een nummer
    return Math.round(this() * 200) + "px";
}