learn.knockoutjs.com - Loading and saving data

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

by Reusablecode

HTML

<script src="http://learn.knockoutjs.com/Scripts/Lib/jquery.tmpl.js"></script>
<script src="http://learn.knockoutjs.com/Scripts/Lib/jquery.address.js"></script>
<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="https://github.com/downloads/SteveSanderson/knockout/knockout-1.3.0beta.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="template: { name: 'taskTemplate', foreach: tasks }, visible: tasks().length > 0"></ul>
    <script type="text/html" id="taskTemplate">
        <li>
            <input type="checkbox" data-bind="checked: isDone" />
            <input data-bind="value: title, enable: !isDone()" />
            <a href="#" data-bind="click: remove">Delete</a>
        </li> 
    </script>
    
    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() { 

    function task(title, isDone, ownerViewModel) {
        this.title = ko.observable(title);
        this.isDone = ko.observable(isDone);
        this.remove = function() {
            ownerViewModel.tasks.destroy(this);
        }
    }

    function taskListViewModel() {
        this.tasks = ko.observableArray([]);
        this.newTaskText = ko.observable();
        this.addTask = function() {
            this.tasks.push(new task(this.newTaskText(), false, this));
            this.newTaskText("");
        }
        this.incompleteTasks = ko.dependentObservable(function() {
            return ko.utils.arrayFilter(this.tasks(), function(task) {
                return !task.isDone() && !task._destroy;
            });
        }, this);

        // Load initial state from server
        var self = this;
        $.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.title, item.isDone, self);
                });
                self.tasks(mappedTasks);
            }
        });

        this.save = function() {
            $.ajax("/echo/json/", {
                data: {
                    json: ko.toJSON({
                        tasks: this.tasks
                    })
                },
                type: "POST",
                dataType: 'json',
                success: function(result) {
                    alert(ko.toJSON(result))
                }
            });
        }
    }


    ko.applyBindings(new taskListViewModel());
});


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