KO Observable Array Example

KO Observable array example

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.0.js"></script>
<div><span>Total Courses : </span><span data-bind="text:allCourses().length"></span>
    <br />
    <span>Selected Courses : </span><span data-bind="text:selectedCourses().length"></span>
    <br />
</div>
<select multiple="multiple" 
data-bind="options:allCourses, selectedOptions:selectedCourses, optionsText:'description'"></select>

<div>
    <button data-bind="click:removeSelected, enable: coursesAreSelected">Remove</button>
    <button data-bind="click:sortCourses, enable:coursesExist">Sort</button>
</div>
<form data-bind="submit:addCourse">
    <span>Description: </span><input type="text" data-bind="value:courseToAdd, valueUpdate:'afterkeydown'" /><br/>
    <button type="submit" data-bind="enable: courseToAdd().length > 0">Add Course</button>
</form>

CSS

div, form{margin:10px}

select
{
     margin:10px;
     height:300px;
     width:300px;
}

JavaScript

$(document).ready(function() {
    var viewModel = function() {

        // course object construction
        var course = function() {
            this.id = ko.observable();
            this.name = ko.observable();
            this.description = ko.observable();
        };

        // all courses
        var allCourses = ko.observableArray([]);

        // selected courses
        var selectedCourses = ko.observableArray([]);
        
        var courses = [];

        // load all existing courses
        var load = function() {
           	courses.push(new course().id(1).name("c#").description("Microsoft C# 4.0"));
            courses.push(new course().id(2).name("javascript").description("JavaScript"));
            courses.push(new course().id(3).name("WCF").description("Microsoft WCF"));
            courses.push(new course().id(4).name("WPF").description("WPF"));
            courses.push(new course().id(5).name("Silverlight").description("Microsoft Silverlight"));
            courses.push(new course().id(6).name("Knockout JS").description("Knockout JS"));
            allCourses(courses);
            selectedCourses(courses);
        };

        // adding courses
        var courseToAdd = ko.observable("");

        var addCourse = function() {
            allCourses.push(new course().id(9).description(courseToAdd()));
            courseToAdd("");
        };

        // removing courses
        var coursesAreSelected = ko.computed(function() {
            return selectedCourses().length > 0;
        });

        var removeSelected = function() {
            allCourses.removeAll(selectedCourses());
            selectedCourses([]);
        };

        // sorting courses
        var coursesExist = ko.computed(function() {
            return allCourses().length > 0;
        });

        var sortCourses = function() {
        debugger;
            allCourses.sort(function(left, right) {
                return left.description().toLowerCase() ==...