Knockout 2 Syntax and Basic usage

Contains Array and List manipulations

by RajamohanShilpa A

HTML

<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>
<p>
     <h3>Using array and List Manipulation</h3>

    <table>
        <thead>
            <th>Sno</th>
            <th>Name</th>
            <th>Department</th>
            <th>City</th>
        </thead>
        <tbody data-bind='foreach: stuDetails'>
            <tr>
                <td data-bind='text: collection().sno'></td>
                <td data-bind='text: collection().name'></td>
                <td data-bind='text: collection().dep'></td>
                <td data-bind='text: collection().city'></td>
            </tr>
        </tbody>
    </table>
</p>
<!-- Event Binding -->
    <table>
        <thead>
            <th>Sno</th>
            <th>Name</th>
            <th>Department</th>
            <th>City</th>
        </thead>
        <tbody data-bind='foreach: stuDetailsClick'>
            <tr>
                <td data-bind='text: collection().sno'></td>
                <td data-bind='text: collection().name'></td>
                <td data-bind='text: collection().dep'></td>
                <td data-bind='text: collection().city'></td>
            </tr>
        </tbody>
    </table>
    <br>
    <input type="button" data-bind='click: onClick' value="Click Me !!!" />
<!-- Grid Model Binding -->
    <table>
        <thead>
            <th>Sno</th>
            <th>Name</th>
            <th>Department</th>
            <th>City</th>
        </thead>
        <tbody data-bind='foreach: stuDetailsGrid'>
            <tr>
                <td data-bind='text: collection().sno'></td>
                <td>
                    <input type='text' data-bind='value: collection().name' />
                </td>
                <td>
                    <select data-bind="options: $root.collection,value:name,optionsText:'dep'" />
                </td>
                <td data-bind='text: collection().city'></td>                
            </tr>
        </tbody>
    </table>

JavaScript

function listDetails(nCollection) {
    this.collection = ko.observable(nCollection);
}

var arrayViewModel = function () {
    this.collection = [{
        sno: 1,
        name: 'Ash',
        dep: 'eee',
        city: 'cbe'
    }, {
        sno: 2,
        name: 'Ram',
        dep: 'ece',
        city: 'hyd'
    }, {
        sno: 3,
        name: 'Was',
        dep: 'it',
        city: 'che'
    }, {
        sno: 4,
        name: 'Kar',
        dep: 'cse',
        city: 'cbe'
    }];

    //Result 1
    //ko.observableArray is Dynamic Colletion for the Binding
    this.stuDetails = ko.observableArray([
    new listDetails(this.collection[0]),
    new listDetails(this.collection[1]),
    new listDetails(this.collection[2]),
    new listDetails(this.collection[3])]);

    //Result 2
    this.stuDetailsClick = ko.observableArray([
    new listDetails(this.collection[0])]);

    this.onClick = function () {
        this.stuDetailsClick.push(new listDetails(this.collection[0]));
    };

    //Result 3
    this.stuDepartment = [{
        dep: 'CSE'
    }, {
        dep: 'ECE'
    }, {
        dep: ' EEE'
    }, {
        dep: ' IT'
    }];

    this.test = ['CSE', 'ECE', 'EEE', 'IT'];

    this.stuDetailsGrid = ko.observableArray([
    new listDetails(this.collection[0])]);

    this.onGridClick = function () {
        this.stuDetailsGrid.push(new listDetails(this.collection[1]));
    };
};
ko.applyBindings(new arrayViewModel());