My First KnockoutJS Excercise

by jboyflaga

HTML

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<div id="students-list">
        <h1>Students List</h1>
        <button data-bind="click: loadStudents">Load Students</button>
        Length: <span data-bind="text: students().length"></span>
        <br />
        <select data-bind="options: students, value: selectedStudent, 
                        optionsText: function(stud) { return stud.id() + '. ' + stud.firstName() + ' ' + stud.lastName(); }"
            size="10">
        </select>
        <br />
        <button data-bind="click: addNewStudent">Add New Student</button>
        <br />
        <button data-bind="click: removeSelectedStudent">Remove Selected Student</button>



        <br />
        <br />
        <span style="font-size: 20px; text-decoration: underline;">Selected Student</span>
        <br />
        <strong>Fullname: <span data-bind="text: selectedStudent() ? selectedStudent().fullName : 'unknown' "></span></strong>
        
        <br />
        Email: <span data-bind="text: selectedStudent() ? selectedStudent().email : 'unknown' "></span>
        <br />
        Gender: <span data-bind="text: selectedStudent() ? selectedStudent().gender : 'unknown' "></span>
        <br />
        

    </div>
    <div id="students-table">
        <h1>Students Table</h1>
        <table>
            <thead>
                <tr>
                    <th>id</th>
                    <th>first name</th>
                    <th>last name</th>
                    <th>email</th>
                    <th>gender</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: students">
                <tr>
                    <td>
                        <input size="2" data-bind="value: id, style: {color: 'red'}" /></td>
                    <td>
                        <input size="10"  data-bind="value: firstName" /></td>
        ...

CSS

#students-table
{
    float: right;
}


#students-list
{
    float: left;
}

JavaScript

var jboy = {}; // my namespace
    jboy.data = {
        Students: [
            { "id": 1, "firstName": "Jboy", "lastName": "Flaga", "gender": "Male", "email": "[email protected]" },
            { "id": 2, "firstName": "Maliit", "lastName": "Liit", "gender": "Male", "email": "[email protected]" },
            { "id": 3, "firstName": "Malaki", "lastName": "Laki", "gender": "Male", "email": "[email protected]" },
            { "id": 4, "firstName": "Mataba", "lastName": "Taba", "gender": "Male", "email": "[email protected]" },
            { "id": 5, "firstName": "Mapayat", "lastName": "Payat", "gender": "Male", "email": "[email protected]" },
            { "id": 6, "firstName": "Maputi", "lastName": "Puti", "gender": "Male", "email": "[email protected]" },
            { "id": 7, "firstName": "Maitim", "lastName": "Itim", "gender": "Male", "email": "[email protected]" },
        ]
    };

    //Student constructor
    function Student(id, fname, lname, gender, email) {
        var self = this;
        self.id = ko.observable(id);
        self.firstName = ko.observable(fname);
        self.lastName = ko.observable(lname);
        self.gender = ko.observable(gender);
        self.email = ko.observable(email);
        self.fullName = ko.computed(function () {
            return this.firstName() + ' ' + this.lastName();
        }, self);
    }

    jboy.studentViewModel = (function () {

        var students = ko.observableArray(),

            selectedStudent = ko.observable(),
            studentToAdd = ko.observable(),

            loadStudents = (function () {
                students([]); //reset
                $.each(jboy.data.Students, function (i, stud) {
                    students.push(new Student(stud.id, stud.firstName, stud.lastName, stud.gender, stud.email));
                });
            }),
            
            addNewStudent = function () {
                var newStudent = new Student();
                var nextStudId = students().length + 1;
       ...