Kendo UI slide experiments using kendo.fx

by RedF

HTML

<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<script src="http://cdn.kendostatic.com/2013.3.1324/js/kendo.web.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css">
<div id="view">
    <input data-bind="value: name" /> <span data-bind="text: name"></span>
    <div data-template="aTemplate" data-bind="source: address"></div>
</div>

<script id="aTemplate" type="text/x-kendo-template">
    <div class = "row">
        <span>Street: </span><span data-bind="text: street"></span><br>
        <span>Name: </span><span data-bind="text: parent().parent().name" ></span><br>
        <input data-bind="value: parent().parent().name" />
    </div>
</script>

CSS

h1 {
    font-size: 1.5em;
}
h2 {
    font-size: 1.25em;
}

JavaScript

var AddressModel = kendo.data.Model.define({
    fields: {
        "street": {
            type: "string"
        }
    }
});

var MainModel = kendo.data.Model.define({
    fields: {
        "name": {
            type: "string"
        },
            "address": {
            defaultValue: new AddressModel()
        }
    }
});


var viewModel = new MainModel({
    name: "John Doe",
    address: {
        street: "Nowhere"
    }
});

kendo.bind($("#view"), viewModel);