Kendo UI Base

by ifandelse

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" data-title="Customer Edit" data-init="init">
    <form role="form">
        <div class="form-group">
            <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</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 cust = storage.load();

var custEditViewModel = kendo.observable({
    name     : cust.name || "",
    address1 : cust.address1 || "",
    address2 : cust.address2 || "",
    city     : cust.city || "",
    state    : cust.state || "",
    zip      : cust.zip || "",
    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")
        });
    },
    reset: function (e) {
        e.preventDefault();
        this.set("name", "");
        this.set("address1", "");
        this.set("address2", "");
        this.set("city", "");
        this.set("state", "");
        this.set("zip", "");
        this.set("updated", false);
    }
});

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