Bindings In KnockoutJS - Part IV

by Jaganathan

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>

<b>Bindings In KnockoutJS - Part IV</b>

<p><b>Checked Binding</b></p>
<div data-bind="with: checkedBinding">
    Select the fruit:
    <div><input type="radio" value="Apple" name="checkedgroup" data-bind="checked: isChecked" /><span data-bind="style: {color:  isChecked()  === 'Apple' ? 'Green' : '' }"> Apple </span></div>
    <div><input type="radio" name="checkedgroup"  value="Orange" data-bind="checked: isChecked" /><span data-bind="style: {color:  isChecked()  === 'Orange' ? 'Green' : '' }"> Orange </span></div>
    <div><input type="radio" name="checkedgroup" value="Banana" data-bind="checked: isChecked" /><span data-bind="style: {color:  isChecked() === 'Banana' ? 'Green' : '' }"> Banana </span></div>
    <p><input type="text" data-bind="value: isChecked, valueUpdate: 'keyup'"></input>Type the fruit name to select </p>
</div>
<p></p>
<div data-bind="with: clickBinding"><p><b>Click binding</b></p>
<p><input data-bind="checked: isBubbling" type="checkbox"/>Make inner Div to bubble the Click event?</p>
    <p><div class="outer" data-bind="click: function(data, event) { divClicked(data,event); }"> <div  class="inner" data-bind="click: clickMe, clickBubble: isBubbling()">Inner Div - Click Me </div></div></p></div>


<div data-bind="with: eventBinding">
    <p><b>Event binding</b></p>
    <p>
        <input data-bind="checked: isBubbling" type="checkbox" />Make inner Div to bubble the Click event?
    </p>
    <p>
        <div class="outer" data-bind="event: { click: function (data, event) { divClicked(data, event); } }">
            <div class="inner" data-bind="event: { click: clickMe }, clickBubble: isBubbling()">Inner Div - Click Me </div>
        </div>
    </p>
</div>

<div data-bind="with: formBinding">
    <p><b>HasFocus/Checked binding</b></p>
    <p>
        <input...

CSS

.single, .multi {
    width:200px;
}

.inner{background:  Green;
}
.outer {padding: 20px; background:  Red; }

JavaScript

function Item(name, id) {
        this.name = name;
        this.id = id;
    };

    function Binding() {
        this.isBubbling = ko.observable(false);
        this.clickMe = function () {
            alert('inner div clicked');
        };
        this.divClicked = function (data, event) {
            if ($(event.target).hasClass('inner')) {
                alert('bubbled from inner div');
            } else {
                alert('directly click on outer div click');
            }
        };

    }

    function FormBinding() {
        var self = this;
        self.text = ko.observable('');
        self.hasTextboxFocused = ko.observable(true);
        self.submitMe = function () { alert('Form submitter'); };
        self.isDisabled = ko.observable(false);
        self.isEnabled = ko.computed(function() 
        { 
            return this.text().length > 0 && this.isDisabled() === false; }, self);
    
    }
 
    function SelectBinding() {
        this.items = ko.observableArray([
            new Item("Red", 1),
            new Item("Green", 2),
            new Item("Black", 3)
        ]);
        this.fadeInOptions = function(option, data) {
            $(option).fadeIn('slow');
        };
        this.selectedItem = ko.observable(); // Nothing selected by default
        this.selectedItems = ko.observableArray(); // Initially, only Germany is selected
    };

    var viewModel = { formBinding: new FormBinding(),
        eventBinding: new Binding(),
        clickBinding: new Binding(),
        selectBinding: new SelectBinding(),
        checkedBinding: {isChecked: ko.observable('Apple')}
    };

    ko.applyBindings(viewModel);