forked from gijs/hello-backbonejs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
124 lines (112 loc) · 5.63 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
<!DOCTYPE html>
<html>
<head>
<title>
Hello Backbone.js Tutorial
</title>
<meta charset="utf-8">
<link rel="stylesheet" href="docs/docco.css">
<script>
if (window.location.href.search(/\?x/) < 0) {
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-924459-7']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
}
</script>
</head>
<body>
<div id="container">
<div id="background"></div>
<ul class="sections" cellpadding="0" cellspacing="0">
<li id="title">
<div class="annotation">
<h1>
Hello Backbone.js
</h1>
</div>
</li>
<li id="section-1">
<div class="annotation">
<p style='background:#aaffaa; padding:5px 10px;'>
Shameless advertisement: Don't forget to check out <a href="http://agilityjs.com"
style='color:blue;'>Agility.js</a>, a simpler
alternative to Backbone.js.
</p>
<p style="background:#ddffdd; padding:5px 10px;">
My name is <a href="https://github.com/LujunWeng" style="color:blue;">Lujun Weng</a>.
I made some modifications to update the original version. See
<a href="https://github.com/LujunWeng/hello-backbonejs">README</a> for details.
</p>
<p>
<strong>Hello Backbone</strong> is a simple <a href="http://documentcloud.github.com/backbone">Backbone.js</a>
tutorial comprised of self-explanatory "hello world" examples of increasing complexity. It was
designed to provide a smoother transition from zero to the popular <a
href="http://documentcloud.github.com/backbone/#examples-todos">Todos example</a>.
</p>
<p>
Backbone.js offers a lean <a
href='http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller'>MVC framework</a> for
organizing your Javascript application. It leads to more maintainable code by untangling the
"spaghetti" of callbacks tied to different parts of the DOM and the backend server that often arises
in rich client-side applications.
</p>
<p>
The tutorial starts with a minimalist View object, and progressively introduces event
binding/handling, Models, and Collections.
</p>
<p style='background:#ffffaa; padding:10px; text-align:center; font-size:120%; font-weight:bold;'>
<a href='docs/1.html' style='color:blue;'>Start the tutorial</a>
</p>
<p>
Once in the tutorial, use the navigation menu in the top-right corner to view other examples.
Example numbers are in order of increasing complexity.
</p>
<p> </p>
<p>
Copyright © Artur Adib [ <a href="http://arturadib.com">arturadib.com</a> ]
</p>
<!-- Twitter link -->
<div style="float:left; margin-bottom:40px;"><img style="width:36px; margin:5px 10px 0 5px;"
src="https://g.twimg.com/Twitter_logo_blue.png"/>
</div>
<div style="background:rgb(245,245,255); padding:10px;">Follow me on Twitter: <a target="_blank"
href="http://twitter.com/r2r">@r2r</a>
</div>
</div>
<div class="content">
<p style='color:black;'>
The only non-Javascript part of the examples is the following HTML template:
</p>
<pre style='color:#777;'>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello-backbonejs</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="...number.js..." type="text/javascript"></script>
</body>
</html>
</pre>
</div>
</li>
</ul>
</div>
<a href="https://github.com/arturadib/hello-backbonejs"><img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"
alt="Fork me on GitHub"></a>
</body>
</html>