forked from dperrymorrow/example-backbone-app
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
138 lines (132 loc) · 5.42 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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE HTML>
<html>
<head>
<title>Example Backbone App</title>
<!-- load the bootstrap stylesheet -->
<link href="css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" />
<!-- load the libraries we need -->
<script type="text/javascript" src="js/libs/jquery.min.js"></script>
<script type="text/javascript" src="js/libs/underscore.min.js"></script>
<script type="text/javascript" src="js/libs/backbone.min.js"></script>
<!-- load our scripts -->
<script type="text/javascript" src="js/note_router.js"></script>
<script type="text/javascript" src="js/models/note_model.js"></script>
<script type="text/javascript" src="js/views/note_index.js"></script>
<script type="text/javascript" src="js/views/note_row.js"></script>
<script type="text/javascript" src="js/views/note_new.js"></script>
<script type="text/javascript" src="js/views/note_edit.js"></script>
<script type="text/javascript" src="js/views/note_show.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Backbone.js Example App</h1>
</div>
<p class="lead">
As simple as possible backbone app. Does not even communicate with a server. Mostly just displaying how to wire up the classes, and listen to events.
</p>
<div class="row">
<div class="span6" id="primary-content">
<!-- the container that gets populated with the index -->
</div>
<div class="span6">
<!-- we are going to debug our backbone collection here -->
<code id="output" style="display:block;white-space:pre-wrap;"></code>
</div>
</div>
</div>
<!-- the form, used for create and edit -->
<script type="text/jst" id="formTemplate">
<div class="well">
<div class="alert alert-error" style="display:none;"></div>
<form>
<h2 class="form-signin-heading"></h2>
<div class="control-group">
<input type="text" class="input-block-level" name="title" placeholder="Title" value="<%= title %>" />
</div>
<div class="control-group">
<input type="text" class="input-block-level" name="author" placeholder="Author" value="<%= author %>" />
</div>
<div class="control-group">
<textarea class="input-block-level" rows="5" name="description" placeholder="Description"><%= description %></textarea>
</div>
<div class="form-actions">
<button class="save btn btn-large btn-info" type="submit">Save</button> or
<a href="#notes/index" class="btn btn-large">Cancel</a>
</div>
</form>
</div>
</script>
<!-- the index container -->
<script type="text/template" id="indexTemplate">
<div class="well">
<a class="btn btn-block btn-large btn-info" href="#note/new">Create New Note</a>
</div>
<table class="table table-striped">
<thead>
<tr>
<th width="20%">Title</th>
<th width="20%">Author</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody></tbody>
</table>
</script>
<!-- the row template, renders once for each item in the index -->
<script type="text/template" id="rowTemplate">
<td>
<a href="#note/<%= id %>/view"><%= title %></a>
</td>
<td><%= author %></td>
<td><% print(description.substring(0, 100)) %>...</td>
<td>
<a href="#" class="delete btn btn-danger btn-small">delete</a>
</td>
</script>
<!-- the show template -->
<script type="text/template" id="showTemplate">
<div class="well">
<a class="btn btn-large" href="#notes/index">
Back To Index
</a>
<a class="btn btn-large btn-info" href="#note/<%= id %>/edit">
Edit Note
</a>
</div>
<h2>
<%= title %>
<small>by: <%= author %></small>
</h2>
<p style="white-space:pre-wrap;"><%= description %></p>
</script>
<script type="text/javascript">
var notes = new APP.Collections.NoteCollection();
var router = new APP.Routers.NoteRouter({notes: notes});
Backbone.history.start();
// we manually pass in the initial data, but this would be called with a collection.fetch() normally
notes.reset([
{
"title": "Example Note 1",
"id": "45",
"author": "David Morrow",
"description": "Pinterest biodiesel excepteur, ad etsy gluten-free semiotics ennui before they sold out irony ut deserunt jean shorts."
},
{
"title": "Example Note 2",
"id": "48",
"author": "David Morrow",
"description": "Fixie synth quinoa umami single-origin coffee master cleanse sartorial typewriter bushwick ennui readymade, lomo trust fund. Shoreditch direct trade fap cray high life swag, viral cred lo-fi locavore fingerstache wayfarers freegan."
},
{
"title": "Example Note 3",
"id": "52",
"author": "David Morrow",
"description": "You probably haven't heard of them keffiyeh lo-fi, yr bespoke selvage cray polaroid beard. Tofu messenger bag sustainable gastropub, gentrify lomo godard PBR echo park fap yr. Small batch truffaut swag forage tofu shoreditch street art helvetica. Hella helvetica fixie godard forage art party lo-fi."
}
]
);
</script>
</body>
</html>