<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 + '->' + $parentContext.$data.text "></span> </div> </div> </div> <div data-bind="with: properties"> <p><b>The $context & $element properties</b></p> <p> <span id="spanCtrl" data-bind="text: 'Span Id is :' + $element.id"></span> </p> <span data-bind="text: $context.$data.title"> </span> </div>
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);
.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; }