Binding Context in KnockoutJS

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>Binding Context in KnockoutJS </b>
<p><b>The $root Binding context</b></p>
<p data-bind="with: rootBinding">Welcome to <span data-bind="text: $root.title + ' ' + name()"></span></p>

<p><b>The $data Binding context</b></p>
<!-- $root context here -->
<div data-bind="with: dataBinding">
    <!-- $parent context here -->
    <div data-bind="foreach: fruits">
        <!-- $data context here -->
        <span data-bind="text: $data.fruit"> </span>
    </div>
</div>

<p><b>The $index Binding context</b></p>
<div data-bind="with: indexBinding">
    <div data-bind="foreach: fruits">
        <span data-bind="text: $index() + ')' + $data.fruit + '    '"></span>
    </div>
</div>

<p><b>The $parent Binding context</b></p>
<p data-bind="with: rootBinding">
	Welcome to <span data-bind="text: $parent.title + ' ' + $data.name()"></span>
</p>

<p><b>The $parents Binding context</b></p>
<div class="parent2" data-bind="with: parent2">
    Parent 2
    <div class="parent1" data-bind="with: parent1">
        Parent 1
        <div class="parent0" data-bind="with: parent0">
            Parent 0
            <div class="child" data-bind="with: childBinding">
                <span data-bind="text: $parents[0].text"></span>
                <br />
                <span data-bind="text: $parents[1].text"></span>
                <br />
                <span data-bind="text: $parents[2].text"></span>
                <br/>
<span data-bind="text: text"></span>
                <br />                
            </div>
        </div>
    </div>
</div>

<p><b>The $parentContext Binding context</b></p>
<div data-bind="with: parentContextBinding">
<div data-bind="foreach: items">
    <div data-bind="foreach: innerItems">
        <span data-bind="text: $parentContext.$index() + '.' + $index() + ')' + $data + '->' +...

CSS

.parent2 {
background: #F1F1F1;
    border: 1px solid black;
    padding: 5px;
}

.parent1 {
background: #ADADAD;
    border: 1px solid black;
    padding: 5px;
}

.parent0 {
background: #CDCDCD;
    border: 1px solid black;
    padding: 5px;
}

.child {
background: #FBFBFB;
    border: 1px solid black;
    padding: 5px;
}

JavaScript

var RootBinding = function() {
    this.name = ko.observable('Jagan');
};

var DataBinding = function() {
    this.fruits = [{fruit: "Apple"},{fruit: "Orange"},{fruit: "Banana"}];
};
var viewModel = { title: 'Binding Context In KnockoutJS',
                 rootBinding: new RootBinding(),
                 parentBinding: new RootBinding(),
                 dataBinding: new DataBinding(),
                 indexBinding: new DataBinding(),
                parent2: {
            text: 'accessing parent 2 from child',
            parent1: {
                text: 'accessing parent 1 from child',
                parent0: {
                    text: 'accessing parent 0 from child',
                    childBinding: {
                        text: 'This is child'
                    }
                }
            }
        },
        parentContextBinding: { items: [{ innerItems: [1, 2, 3], text: 'one' }, { innerItems: [1, 2, 3], text: 'two' }, { innerItems: [1, 2, 3], text: 'three' }] },
        properties: {title: 'Hello Jagan'}};

ko.applyBindings(viewModel);