-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
88 lines (68 loc) · 3.38 KB
/
index.html
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
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sample Ember.js Application</title>
<link rel="stylesheet" href="assets/css/normalize.css">
<link rel="stylesheet" href="assets/css/main.css">
<script src="assets/js/vendors/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!-- To make things simple, I will be including all my Handlebars templates into
this simple HTML file. But in a proper development environment, you should be
using seperate .hbs files. -->
<!-- This is the main template layout, meaning if you're familiar with
Rails, this is just like its application layout or in Django, the typical
base.html file which you will find in your templates. -->
<script type="text/x-handlebars" data-template-name="application">
<div class="row">
<div class="media group">
<div class="img">
<h1>Application Template</h1>
</div>
<div class="bd-reverse">
<button class="btn space-big soft" {{action "openModal"}}>Open Modal</button>
</div>
</div>
{{ outlet }}
</div>
</script>
<!-- The template that will get inserted into the application {{ outlet }} when we
visit the root path i.e. '/'.
Note that by default, Ember will automatically render this template when you visit the
root path, even though you did not set its route explictly in the router. -->
<script type="text/x-handlebars" data-template-name="index">
<p>Whoa, this is my first Ember.js application.</p>
{{#linkTo "about"}}Find out more about us{{/linkTo}}
</script>
<!-- Template for the 'About Us' page which is located at '/about', notice the same
naming convention that we are using for both the template and the route. -->
<script type="text/x-handlebars" data-template-name="about">
<p>And now you are on the About Us page...</p>
{{#linkTo "index"}}Go back to the Homepage{{/linkTo}}
</script>
<!-- Template for the modal dialog that we're going to display in this example. -->
<script type="text/x-handlebars" data-template-name="modal">
<div class="modal-overlay"></div>
<div class="modal soft">
<h1>Modal Dialog.</h1>
<p>The model dialog is opened by firing an event i.e. `openModal` handled by the router.</p>
<p>But to close it, we will be sending an event to be handled by the view itself instead of the router, since there is no state change in opening this modal dialog.</p>
<button class="btn space-big soft" {{action "closeModal" target="view"}}>Close Dialog</button>
</div>
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery-1.9.0.min.js"><\/script>')</script>
<script src="assets/js/vendors/handlebars-1.0.0.rc.2.js"></script>
<script src="assets/js/vendors/ember.js"></script>
<script src="assets/js/vendors/ember-data.js"></script>
<!-- Application Logic -->
<script src="assets/js/app.js"></script>
<script src="assets/js/router.js"></script>
<script src="assets/js/views/ModalView.js"></script>
</body>
</html>