Knockout Learning

by Pratik Bhoir

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>
<h2 data-bind="text: title"></h2>

<fieldset>
    <div class="formBlocks">
        <label>First name:</label>
        <br/>
        <input data-bind="value: student.firstName" />
        <br/>
        <div data-bind="validationMessage: student.firstName"></div>
    </div>
    <div class="formBlocks">
        <label>Last name:</label>
        <br/>
        <input data-bind="value: student.lastName" />
    </div>
    <div class="formBlocks">
        <label>Age:</label>
        <br/>
        <input data-bind="value: student.age" />
        <br/>
        <div data-bind="validationMessage: student.age"></div>
    </div>
    <div class="formBlocks">
        <label>Meal:</label>
        <br/>
        <select data-bind="options: availableMeals, value: student.meal, optionsText: 'mealName'"></select>
    </div>
    <div style="clear:both;"></div>
    <button data-bind="click: addStudent, enable: enableAddStudent">Add Student</button>
</fieldset>
<br>
<br>
 <h3 data-bind="text: 'No. of Students : ' + studentList().length"> </h3>

 <h3 data-bind="text: 'Total Amount : ' + totalAmount() +' Rs.'"> </h3>

<table data-bind="if: studentList().length >0">
    <thead>
        <tr>
            <th>No.</th>
            <th>Name</th>
            <th>Age</th>
            <th>Meal</th>
            <th>Amount</th>
            <th></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: studentList">
        <tr>
            <td data-bind="text: ($index()+1)+'.'"></td>
            <td data-bind="text: name"></td>
            <td data-bind="text: age"></td>
            <td data-bind="text: meal.mealName">
                <!-- <select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"></select>
             -->
            </td>
            <td data-bind="text: (meal.price * 2)+' Rs.'"></td>
            <td><a href="#" data-bind="click:...

CSS

.formBlocks {
    float: left;
    margin:5px;
}
th {
    font-size: 14px;
    font-weight: normal;
    color: #039;
    border-bottom: 2px solid #6678b1;
    padding: 10px 8px;
}
td {
    color: #669;
    padding: 9px 8px 0;
}

JavaScript

//student model class
function studentModel() {
    var self = this;
    this.firstName = ko.observable("").extend({
        required: true,
        pattern: {
            message: 'Must be a valid first name',
            params: patterns.alpha
        }
    });
    this.lastName = ko.observable("").extend({
        required: true,
        pattern: {
            message: 'Must be a valid lastname',
            params: patterns.alpha
        }
    });
    this.age = ko.observable("").extend({
        pattern: {
            params: /^\\d*$/,
            message: "Invalid number."
        }
    });
    this.name = ko.computed(function () {
        return self.firstName() + " " + self.lastName();
    });
    this.meal = ko.observable();
}

var patterns = {
    alpha: /^[a-zA-Z]+$/,
    email: /^([\d\w-\.]+@([\d\w-]+\.)+[\w]{2,4})?$/,
    phone: /^\d[\d -]*\d$/,
    postcode: /^([a-zA-Z]{1,2}[0-9][0-9]?[a-zA-Z\s]?\s*[0-9][a-zA-Z]{2,2})|(GIR 0AA)$/

};

function AppViewModel() {
    var self = this;
    this.title = "The Knockout Sample";
    this.student = new studentModel();
    this.studentList = ko.observableArray();

    //function for enable AddStudent
    this.enableAddStudent = ko.computed(function () {
        if (
        self.student.firstName().toString().trim() == "" || self.student.lastName().toString().trim() == "") return false;
        else return true;
    });

    //function to initialize student
    this.initStudent = function () {
        self.student.firstName("");
        self.student.lastName("");
        self.student.age("");
        self.student.meal(self.availableMeals[0]);
    };

    //function for adding student
    this.addStudent = function () {
        //self.student.meal(self.availableMeals[1]);
        self.studentList.push(ko.toJS(self.student));
        self.initStudent();
    };

    //function for removing student
    this.removeStudent = function (student) {

        self.studentList.remove(student)
    };

    this.totalAmount...