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

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() {
         ...