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>
    <div data-bind="if: selectedStudent">
        <button data-bind="click: removeSelectedStudent">Remove Selected Student</button>
    </div>
    <br />
    <br />
    <div data-bind="if: selectedStudent"> <span style="font-size: 20px; text-decoration: underline;">Selected Student</span>

        <br
        /> <strong>Fullname: <span data-bind="text: selectedStudent().fullName"></span></strong>

        <br
        />Email: <span data-bind="text: selectedStudent().email"></span>

        <br />Gender: <span data-bind="text: selectedStudent().gender"></span>

        <br />
    </div>
    <br />
</div>
<div id="students-table">
     <h1>Students Table</h1>

    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>first name</th>
                <th>last name</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>
                <td>
                    <input size="10" data-bind="value: lastName" />
                </td>
                <td>
                    <input data-bind="value: email" />
         ...

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,...