Learn KNOCKOUT-JS with Real Code Examples

<div class="container" data-bind="css: isDark() ? 'dark-theme' : 'light-theme'">
    <h2>Counter: <span data-bind="text: count"></span></h2>
    <div>
        <button data-bind="click: increment">+</button>
        <button data-bind="click: decrement">-</button>
        <button data-bind="click: reset">Reset</button>
    </div>
    <button data-bind="click: toggleTheme">Switch to <span data-bind="text: isDark() ? 'Light' : 'Dark'"></span> Theme</button>
</div>

<script>
function CounterViewModel() {
    this.count = ko.observable(0);
    this.isDark = ko.observable(false);

    this.increment = () => { this.count(this.count() + 1); };
    this.decrement = () => { this.count(this.count() - 1); };
    this.reset = () => { this.count(0); };
    this.toggleTheme = () => { this.isDark(!this.isDark()); };
}
ko.applyBindings(new CounterViewModel());
</script>

<style>
.dark-theme { background-color: #222; color: #eee; padding: 1em; }
.light-theme { background-color: #fff; color: #000; padding: 1em; }
button { margin: 0.25em; padding: 0.5em 1em; }
</style>

Basic counter with increment, decrement, reset, and theme toggle.

<div class="container" data-bind="css: isDark() ? 'dark-theme' : 'light-theme'">
    <h2>Counter: <span data-bind="text: count"></span></h2>
    <div>
        <button data-bind="click: increment">+ <span data-bind="text: step"></span></button>
        <button data-bind="click: decrement">- <span data-bind="text: step"></span></button>
        <button data-bind="click: reset">Reset</button>
    </div>
    <button data-bind="click: toggleTheme">Switch Theme</button>
</div>

<script>
function CounterViewModel() {
    this.count = ko.observable(0);
    this.step = ko.observable(5);
    this.isDark = ko.observable(false);

    this.increment = () => { this.count(this.count() + this.step()); };
    this.decrement = () => { this.count(this.count() - this.step()); };
    this.reset = () => { this.count(0); };
    this.toggleTheme = () => { this.isDark(!this.isDark()); };
}
ko.applyBindings(new CounterViewModel());
</script>

Counter that increments/decrements by a custom step value.

<div class="container" data-bind="css: isDark() ? 'dark-theme' : 'light-theme'">
    <h2>Counter: <span data-bind="text: count"></span></h2>
    <div>
        <button data-bind="click: increment">+</button>
        <button data-bind="click: decrement">-</button>
        <button data-bind="click: reset">Reset</button>
    </div>
    <button data-bind="click: toggleTheme">Toggle Theme</button>
</div>

<script>
function CounterViewModel() {
    this.count = ko.observable(0);
    this.min = 0;
    this.max = 10;
    this.isDark = ko.observable(false);

    this.increment = () => { if(this.count() < this.max) this.count(this.count() + 1); };
    this.decrement = () => { if(this.count() > this.min) this.count(this.count() - 1); };
    this.reset = () => { this.count(0); };
    this.toggleTheme = () => { this.isDark(!this.isDark()); };
}
ko.applyBindings(new CounterViewModel());
</script>

Counter with maximum and minimum limits.

<div class="container" data-bind="css: isDark() ? 'dark-theme' : 'light-theme'">
    <h2>Counter: <span data-bind="text: count"></span></h2>
    <div>
        <button data-bind="click: increment">+</button>
        <button data-bind="click: decrement">-</button>
        <button data-bind="click: reset">Reset</button>
    </div>
    <p>History: <span data-bind="foreach: history"><span data-bind="text: $data"></span> </span></p>
    <button data-bind="click: toggleTheme">Toggle Theme</button>
</div>

<script>
function CounterViewModel() {
    this.count = ko.observable(0);
    this.history = ko.observableArray([]);
    this.isDark = ko.observable(false);

    this.increment = () => { this.count(this.count() + 1); this.history.push(this.count()); };
    this.decrement = () => { this.count(this.count() - 1); this.history.push(this.count()); };
    this.reset = () => { this.count(0); this.history.push(this.count()); };
    this.toggleTheme = () => { this.isDark(!this.isDark()); };
}
ko.applyBindings(new CounterViewModel());
</script>

Counter that keeps track of previous values.

<div class="container" data-bind="css: isDark() ? 'dark-theme' : 'light-theme'">
    <h2>Counter: <span data-bind="text: count"></span></h2>
    <div>
        <button data-bind="click: increment">+</button>
        <button data-bind="click: decrement">-</button>
        <button data-bind="click: reset">Reset</button>
        <button data-bind="click: toggleAuto">Start/Stop Auto</button>
    </div>
    <button data-bind="click: toggleTheme">Toggle Theme</button>
</div>

<script>
function CounterViewModel() {
    this.count = ko.observable(0);
    this.isDark = ko.observable(false);
    this.auto = false;
    this.timer = null;

    this.increment = () => { this.count(this.count() + 1); };
    this.decrement = () => { this.count(this.count() - 1); };
    this.reset = () => { this.count(0); };
    this.toggleTheme = () => { this.isDark(!this.isDark()); };
    this.toggleAuto = () => {
        this.auto = !this.auto;
        if(this.auto) this.timer = setInterval(this.increment, 1000);
        else clearInterval(this.timer);
    };
}
ko.applyBindings(new CounterViewModel());
</script>

Counter that can auto-increment every second.

<div class="container" data-bind="css: isDark() ? 'dark-theme' : 'light-theme'">
    <h2>Counter: <span data-bind="text: count"></span></h2>
    <div>
        <button data-bind="click: increment">+</button>
        <button data-bind="click: doubleIncrement">++</button>
        <button data-bind="click: decrement">-</button>
        <button data-bind="click: reset">Reset</button>
    </div>
    <button data-bind="click: toggleTheme">Toggle Theme</button>
</div>

<script>
function CounterViewModel() {
    this.count = ko.observable(0);
    this.isDark = ko.observable(false);

    this.increment = () => { this.count(this.count() + 1); };
    this.doubleIncrement = () => { this.count(this.count() + 2); };
    this.decrement = () => { this.count(this.count() - 1); };
    this.reset = () => { this.count(0); };
    this.toggleTheme = () => { this.isDark(!this.isDark()); };
}
ko.applyBindings(new CounterViewModel());
</script>

Counter that increments by 2 on a special button.

<div class="container" data-bind="css: isDark() ? 'dark-theme' : 'light-theme'">
    <h2>Counter: <span data-bind="text: count"></span> (<span data-bind="text: parity"></span>)</h2>
    <div>
        <button data-bind="click: increment">+</button>
        <button data-bind="click: decrement">-</button>
        <button data-bind="click: reset">Reset</button>
    </div>
    <button data-bind="click: toggleTheme">Toggle Theme</button>
</div>

<script>
function CounterViewModel() {
    this.count = ko.observable(0);
    this.isDark = ko.observable(false);

    this.increment = () => { this.count(this.count() + 1); };
    this.decrement = () => { this.count(this.count() - 1); };
    this.reset = () => { this.count(0); };
    this.toggleTheme = () => { this.isDark(!this.isDark()); };

    this.parity = ko.computed(() => this.count() % 2 === 0 ? 'Even' : 'Odd');
}
ko.applyBindings(new CounterViewModel());
</script>

Shows whether the current count is even or odd.

<div class="container" data-bind="css: isDark() ? 'dark-theme' : 'light-theme'">
    <h2>Counter: <span data-bind="text: count"></span></h2>
    <div>
        <button data-bind="click: increment">+</button>
        <button data-bind="click: decrement">-</button>
        <button data-bind="click: reset">Reset</button>
    </div>
    <button data-bind="click: toggleTheme">Toggle Theme</button>
</div>

<script>
function CounterViewModel() {
    this.count = ko.observable(parseInt(localStorage.getItem('count') || 0));
    this.isDark = ko.observable(false);

    this.increment = () => { this.count(this.count() + 1); localStorage.setItem('count', this.count()); };
    this.decrement = () => { this.count(this.count() - 1); localStorage.setItem('count', this.count()); };
    this.reset = () => { this.count(0); localStorage.setItem('count', 0); };
    this.toggleTheme = () => { this.isDark(!this.isDark()); };
}
ko.applyBindings(new CounterViewModel());
</script>

Persists counter value in localStorage.

<div class="container" data-bind="css: theme()">
    <h2>Counter: <span data-bind="text: count"></span></h2>
    <div>
        <button data-bind="click: increment">+</button>
        <button data-bind="click: decrement">-</button>
        <button data-bind="click: reset">Reset</button>
    </div>
    <button data-bind="click: toggleTheme">Switch Theme</button>
</div>

<script>
function CounterViewModel() {
    this.count = ko.observable(0);
    this.themes = ['light-theme','dark-theme','blue-theme'];
    this.current = 0;
    this.theme = ko.observable(this.themes[this.current]);

    this.increment = () => { this.count(this.count() + 1); };
    this.decrement = () => { this.count(this.count() - 1); };
    this.reset = () => { this.count(0); };
    this.toggleTheme = () => { this.current = (this.current + 1) % this.themes.length; this.theme(this.themes[this.current]); };
}
ko.applyBindings(new CounterViewModel());
</script>

Counter that cycles through multiple color themes.