jsfiddle test

fiddle.css

body, button {
    /* brilliant UX */
    font-family :"Comic Sans MS"
}

fiddle.html

<div data-bind="with: contacts">
<h2>Contacts</h2>
<span data-bind="with: data.item">Name:<input type="text" data-bind="    value: name, required: true" />
    <button data-bind="click: $parent.event.add">add</button>
</span>

<span data-bind="visible: flag.dirty">
    <button data-bind="click: call.load ">cancel</button>
    <button data-bind="click: call.save">save</button>
</span>
<hr />
<div data-bind="foreach: data.items">
    Name:<input type="text" data-bind="value: name, dirty: true, required: true" />
    Phone:<input type="text" data-bind="value: phone, dirty: true" />
    Email:<input type="text" data-bind="value: email, dirty: true" />
    <button data-bind="click: $parent.event.remove">delete</button>
    <hr />
</div>
<span data-bind="text: data.message"></span>
</div>
<hr />
<div data-bind="with: todos">
<h2>Todo</h2>
<span data-bind="with: data.item">Name:<input type="text" data-bind="    value: name, required: true" />
    <button data-bind="click: $parent.event.add">add</button>
</span>
<span data-bind="visible: flag.dirty">
    <button data-bind="click: call.load">cancel</button>
    <button data-bind="click: call.save">save</button>
</span>
<hr />
<div data-bind="foreach: data.items">
    Name:<input type="text" data-bind="value: name, dirty: true, required: true" />
    Completed:<input type="checkbox" data-bind="checked: completed, dirty: true" />
    <button data-bind="click: $parent.event.remove">delete</button>
    <hr />
</div>
<span data-bind="text: data.message"></span>
</div>

fiddle.js

$(function () {

    var data = {
        contacts: new ViewModel(Contact),
        todos: new ViewModel(Todo)
    };
    ko.applyBindings(data);
});

function Contact() { // plain old object
    return {
        name: "",
        phone: "",
        email: ""
    };
}

function Todo() { // plain old object
    return {
        name: "",
        completed: false
    };
}

fiddle.manifest

name: jsfiddle test
description: Testing hosting gist in jsfiddle.
authors:
  - foofoodog
resources:
  - http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js
  - http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js
  - https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js
  - https://gist.github.com/foofoodog/5497235/raw/Storage.js
  - https://gist.github.com/foofoodog/5497235/raw/ViewModel.js
  - https://gist.github.com/foofoodog/5497235/raw/bindingHandlers.js
normalize_css: no

notes

http://jsfiddle.net/gh/gist/library/pure/5496917/