Front End Starter(3)knockout - Form and Post

Front End Starter(3)knockout - Form and Post

1. Single Page Applications

Building a webmail client
Example is here
http://learn.knockoutjs.com/WebmailExampleStandalone.html#Inbox

2. Custom Binding
http://learn.knockoutjs.com/#/?tutorial=custombindings

3. Loading and Saving Data
http://learn.knockoutjs.com/#/?tutorial=loadingsaving

Task List Example
Loading the Data from Server Side
<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>

<form action="/tasks/saveform" method="post">
    <input type="hidden" name="tasks" data-bind="value: ko.toJSON(tasks)" />
    <button type="submit">Save</button>
</form>

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() 
          });
    });
   
    //Loading
    $.getJSON("/tasks", function(allData) {
        var mappedTasks = $.map(allData, function(item) { 
               return new Task(item) 
        });
        self.tasks(mappedTasks);
    }); 

    // Operations
    self.addTask = function() {
        self.tasks.push(new Task({ title: this.newTaskText() }));
        self.newTaskText("");
    };
    self.removeTask = function(task) { self.tasks.remove(task) };
}

ko.applyBindings(new TaskListViewModel());

Sending the Post Form
<form action="/tasks/saveform" method="post">
    <input type="hidden" name="tasks" data-bind="value: ko.toJSON(tasks)" />
    <button type="submit">Save</button>
</form>

Another Way to Post Form
<button data-bind="click: save">Save</button>

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() });
    });

   …snip...
       
    self.save = function() {
        $.ajax("/tasks", {
            data: ko.toJSON({ tasks: self.tasks }),
            type: "post", contentType: "application/json",
            success: function(result) { alert(result) }
        });
    };
}

I love knockoutJS.


References:
http://learn.knockoutjs.com/#/?tutorial=collections
http://learn.knockoutjs.com/#/?tutorial=webmail

underscore
http://sillycat.iteye.com/blog/1862248