learn.knockoutjs.com - Loading and saving data

http://learn.knockoutjs.com/#/?tutorial=loadingsaving

by Keith Lott

HTML

<link rel="stylesheet" href="http://learn.knockoutjs.com/Content/App/coderunner.css">
<link rel="stylesheet" href="http://learn.knockoutjs.com//Content/TutorialSpecific/loadingsaving.css">
<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<body class="codeRunner">

    <h3>Tasks</h3>
    
    <form data-bind="submit: addTask">
        Add task: <input data-bind="value: newTaskText" placeholder="What needs to be done?" />
        <button type="submit">Add</button>
    </form>
    
    <ul data-bind="foreach: tasks, visible: tasks().length > 0">
        <li>
            <input type="checkbox" data-bind="checked: isDone" />
            <input data-bind="value: title, disable: isDone" />
            <a href="#" data-bind="click: $parent.removeTask">Delete</a>
        </li> 
    </ul>
    
    You have <b data-bind="text: incompleteTasks().length">&nbsp;</b> incomplete task(s)
    <span data-bind="visible: incompleteTasks().length == 0"> - it's beer time!</span>
    
    <button data-bind="click: save">Save</button>
    
</body>

JavaScript

function Task(data) {
    this.title = ko.observable(data.title);
    this.isDone = ko.observable(data.isDone);
}

function TaskListViewModel() {
    // Data
    var self = this;
    self.tasks = ko.observableArray([]);
    self.newTaskText = ko.observable();
    self.incompleteTasks = ko.computed(function() {
        return ko.utils.arrayFilter(self.tasks(), function(task) { return !task.isDone() && !task._destroy });
    });

    // Operations
    self.addTask = function() {
        self.tasks.push(new Task({ title: this.newTaskText() }));
        self.newTaskText("");
    };
    self.removeTask = function(task) { self.tasks.destroy(task) };
    self.save = function() {
        $.ajax("/echo/json/", {
            data: {
                json: ko.toJSON({
                    tasks: this.tasks
                })
            },
            type: "POST",
            dataType: 'json',
            success: function(result) {
                alert(ko.toJSON(result))
            }
        });
    };
                                
     //Load initial state from server, convert it to Task instances, then populate self.tasks
    $.ajax("/echo/json/", {
        data: {
            json: ko.toJSON(fakeData)
        },
        type: "POST",
        dataType: 'json',
        success: function(data) {
            var mappedTasks = $.map(data, function(item) {
                return new Task(item);
            });

            self.tasks(mappedTasks);
        }
    });                               
}

var fakeData = [{
    "title": "Wire the money to Panama",
    "isDone": true},
{
    "title": "Get hair dye, beard trimmer, dark glasses and \"passport\"",
    "isDone": false},
{
    "title": "Book taxi to airport",
    "isDone": false},
{
    "title": "Arrange for someone to look after the cat",
    "isDone": false}];

ko.applyBindings(new TaskListViewModel());