JSFiddle - React, Tailwind, and code Playground

by Farzad Cyrus

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.1.0.js"></script>
<button id='addButton'>item++</button>
<br/>
<span>viewModel.item = </span>

<span data-bind='text: $data.item(), bind: $data.item'></span>

JavaScript

$(document).ready(function () {
    $('#addButton').click(function () {
        viewModel.item(viewModel.item() + 1);
    });
    var viewModel = {
        item: ko.observable(1)
    };
    ko.bindingHandlers.bind = {
        init: function (element, valueAccessor) {
            alert('init');
        },
        update: function (element, valueAccessor) {
            ko.unwrap(valueAccessor());
            if (viewModel.item() >= 4) {
                alert('You have added more than ' + (viewModel.item() - 1) + ' items! Are you sure you want to continue on?');
            }
        }
    };
    ko.applyBindings(viewModel);
});