forked from rstropek/Samples
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathSPASample.html
More file actions
109 lines (100 loc) · 4.08 KB
/
SPASample.html
File metadata and controls
109 lines (100 loc) · 4.08 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SPA Demo</title>
<!-- Get style sheets from kendo's CDN
In this example we use the Twitter Bootstrap theme. -->
<!-- CDN sources
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common-bootstrap.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.bootstrap.min.css" rel="stylesheet" />
-->
<!-- Local sources -->
<link href="Content/KendoUICore/kendo.common-bootstrap.min.css" rel="stylesheet" />
<link href="Content/KendoUICore/kendo.bootstrap.min.css" rel="stylesheet" />
<link href="Samples.css" rel="stylesheet" />
<!-- Get scripts from kendo's CDN
Note that we get JQuery from kendo's CDN, too, to always get a compatible version. -->
<!-- CDN sources
<script src="http://cdn.kendostatic.com/2014.1.528/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.ui.core.min.js"></script>
-->
<!-- Local sources -->
<script src="Scripts/KendoUICore/jquery.min.js"></script>
<script src="Scripts/KendoUICore/kendo.ui.core.min.js"></script>
</head>
<body>
<!-- Master template -->
<script id="layout" type="text/x-kendo-template">
<!-- All other views will be rendered in the following div -->
<div id="content"></div>
<!-- Add a footer that will appear below every view -->
<footer>This sample was brought to you by Windows Developer Magazine.</footer>
</script>
<!-- Simple view template -->
<script id="rootView" type="text/x-kendo-template">
<h1>Welcome</h1>
<p>This is the initial page!</p>
<p>Want to know more about the app? Read our <a href="#about">About</a> section.</p>
<p>Want <a href="#customer/ALFKI">details about customer ALFKI</a>?</p>
</script>
<!-- View template with bindings to a model -->
<script id="customerView" type="text/x-kendo-template">
<h1>Customer <span data-bind="text: customer.CompanyName"></span></h1>
<p>This is data about the customer ...</p>
</script>
<!-- This is the div where our layout will be rendered to -->
<div id="app"></div>
<script>
// Note that this sample contains only local templates. If you are
// interested how to load external templates (separate files),
// see http://docs.telerik.com/kendo-ui/howto/load-templates-external-files.
// Crete layout and first to simple views
var layout = new kendo.Layout("layout");
var rootView = new kendo.View("rootView");
var aboutView = new kendo.View("<h1>About</h1><p>Lorem ipsum ...</p>");
// Create view for customer data. Note how we add a model for data binding.
var customerModel = new kendo.observable();
var customerView = new kendo.View("customerView", { model: customerModel });
var customerNotFoundView = new kendo.View("<p>Sorry, customer not found!</p>");
// Setup routing logic
var router = new kendo.Router({
// Render layout when initializing the router
init: function () { layout.render("#app"); }
});
router.route("/", function () {
// Show root view
layout.showIn("#content", rootView);
// Set document title to make browser history more beautiful
document.title = "Home";
});
router.route("about", function () {
// Show "about" view
layout.showIn("#content", aboutView);
document.title = "About";
});
// Note that the next route contains a parameter (customer ID)
router.route("customer/:id", function (id) {
// Get customer data using OData
$.ajax({
url: "http://services.odata.org/Northwind/Northwind.svc/Customers?$filter=CustomerID eq '" + id + "'",
headers: { Accept: "application/json" }
}).then(function (result) {
// Check if customer was found
if (result.value.length == 0) {
layout.showIn("#content", customerNotFoundView);
document.title = "Customer not found";
}
else {
// Update customer model and display customer view (contains data binding)
customerModel.set("customer", result.value[0]);
layout.showIn("#content", customerView);
document.title = "Customer " + customerModel.customer.CompanyName;
}
});
});
$(function () {
router.start();
});
</script>
</body>
</html>