Kendo UI Base

HTML

<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div id="custEdit">
    <form role="form">
        <div class="form-group">
            <label  data-format="#.## kg" data-bind="text: cellno"></label>
            <label>Customer Name: <input class="form-control" data-bind="value: name" /></label>
        </div>
        <div class="form-group">
            <label>Address 1: <input class="form-control" data-bind="value: address1" /></label>
        </div>
        <div class="form-group">
            <label>Address 2: <input class="form-control" data-bind="value: address2" /></label>
        </div>
        <div class="form-group">
            <label>City: <input class="form-control" data-bind="value: city" /></label>
        </div>
        <div class="form-group">
            <label>State: <input class="form-control" data-bind="value: state" /></label>
        </div>
        <div class="form-group">
            <label>Zip: <input class="form-control" data-bind="value: zip" /></label>
        </div>
        <button class="k-button" data-bind="click: update">Update</button>
        <button class="k-button" data-bind="click: reset">Reset to Defaults</button>
        <div data-bind="visible: updated">
            <h4>Customer Updated!</h4>
        </div>
    </form>
</div>

CSS

form {
    padding: 1%;
}

JavaScript

var storage = {
    save: function(cust) {
        localStorage.setItem("cust", JSON.stringify(cust));
    },
    load: function() {
        var cust = localStorage.getItem("cust");
        return cust ? JSON.parse(cust) : {}; 
    }
};

var defaults = storage.load();

var custEditViewModel = kendo.observable({
    name     : defaults.name,
    address1 : defaults.address1,
    address2 : defaults.address2,
    city     : defaults.city,
    state    : defaults.state,
    zip      : defaults.zip,
    cellno   : 343434,
    updated  : false,
    update: function (e) {
        e.preventDefault();
        this.set("updated", true);
        storage.save({
            name     : this.get("name"),
            address1 : this.get("address1"),
            address2 : this.get("address2"),
            city     : this.get("city"),
            state    : this.get("state"),
            zip      : this.get("zip"),
            cellno      : 34234324
        });
    },
    reset: function (e) {
        e.preventDefault();
        this.set("name", defaults.name);
        this.set("address1", defaults.address1);
        this.set("address2", defaults.address2);
        this.set("city", defaults.city);
        this.set("state", defaults.state);
        this.set("zip", defaults.zip);
        this.set("updated", false);
         this.set("cellno", 34234234);
    }
});

kendo.bind("#custEdit", custEditViewModel);