Nested KO Click Bindings

by plus5keen

HTML

<p class="logCounter">
    Log Counter:
    <span data-bind="text: logCount"></span>
</p>

<div data-bind="click: log" class="buttonContainer">
    <button data-bind="click: log">
        Log Stuff To Console
    </button>
</div>

<div data-bind="click: log" class="buttonContainer">
    <button data-bind="click: log, clickBubble: false">
        Log Stuff To Console Without Event Bubbling
    </button>
</div>

<div class="buttonContainer">
    <button data-bind="click: resetLogCount">
        Reset Log Counter
    </button>
</div>

CSS

p.logCounter {
    margin: 2px;
    padding: 2px;
    background-color: #EEF;
}

div.buttonContainer {
    margin: 8px 4px;
    padding: 8px 4px;
    background-color: #DDF;
}

JavaScript

ko.applyBindings({
    logCount: ko.observable(0),
    log: function () {
        this.logCount(this.logCount() + 1);
        console.log(this, arguments);
    },
    resetLogCount: function () {
        this.logCount(0);
    }
});