bindings in knockoutjs - part II

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>

<h3>Bindings in KnockoutJS - Part II </h3>

<b>foreach binding </b>
<ul data-bind="foreach: { data: people, as: 'person', includeDestroyed: true, afterRender: yellowFadeIn }">
    <li data-bind="text: person.name"></li>
</ul>
<a class="link" title="Click to add an item" data-bind="click: addPerson">Add Item</a>

<p><b>if binding</b></p>
<p><input type="checkbox" data-bind="checked: isChecked" />Check/Uncheck the checkbox to add/remove Hello node</p>
 
<p data-bind="if: isChecked">Hello.... You have clicked the checkbox</p>

<b>if binding</b>
<p><input type="checkbox" data-bind="checked: isChecked" />Check/Uncheck the checkbox to add/remove Hello node</p>
 
<p data-bind="ifnot: isChecked">Hello.... You have clicked the checkbox</p>

<b>with binding</b>
<p><div data-bind="with: withBinding" > 
    <p>Name: <span data-bind="text: name"></span></p>
    <p>College: <span  data-bind="text: college"></span></p>
    </div>
    </p>

CSS

.link{
    text-decoration: underline;
    color: blue;
}

.link:hover {
    cursor: pointer;
}

JavaScript

function viewModel() {
    var self = this;
    self.isChecked = ko.observable(false);
    self.people = ko.observableArray([
        { name: 'ABC' },
        { name: 'DEF' },
        { name: 'GHI' }
    ]);
    
    self.withBinding = {name: 'Jagan',
                        college: 'VCET'};
 
    self.addPerson = function() {
        self.people.push({ name: "New item at" + new Date() });
    };
 
    self.removePerson = function() {
        self.people.remove(this);
    }
    
    self.yellowFadeIn = function(element, index, data) {
       $(element).animate({
                            width: "30%",
                            opacity: 0.4,
                            marginLeft: "0.6in",
                            fontSize: "1em",
                            borderWidth: "10px"
                          }, 1500 );
    }
}
 
ko.applyBindings(new viewModel());