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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
|
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
<head>
<meta name="readability-verification" content="QaMWXDtxjtrFwfPQ2an55eWRMRLr7F2ermV5E9ch"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>What is a collection? - Backbone.js Tutorials</title>
<link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml">
<meta name="author" content="Backbone Tutorials" />
<!-- syntax highlighting CSS -->
<link rel="stylesheet" href="/css/reset.css" type="text/css" />
<!-- syntax highlighting CSS -->
<link rel="stylesheet" href="/css/syntax.css" type="text/css" />
<!-- github ribbon CSS -->
<link rel="stylesheet" href="/css/ribbon.css" type="text/css" />
<!-- Homepage CSS -->
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" />
<!-- Homepage CSS -->
<link rel="stylesheet" href="/css/stacklayout.css" type="text/css" media="screen, projection" />
<!-- Typekit -->
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<style>
.container {
width: 760px;
margin: auto;
}
.menu {
margin-left: 40px;
padding-top: 10px;
padding-bottom: 10px;
}
.menu a {
margin-right: 10px;
}
p {
width: 720px;
margin: auto;
}
.FlattrButton {
position: absolute;
top: 15px;
right: 15px;
}
</style>
<script type="text/javascript">
/* <![CDATA[ */
(function() {
var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
t.parentNode.insertBefore(s, t);
})();
/* ]]> */
</script>
</head>
<body>
<div class="left ribbon-holder">
<a href="https://github.com/thomasdavis/backbonetutorials" class="red ribbon">
<span class="text">Fork on GitHub</span>
</a>
</div>
<a class="FlattrButton" style="display:none;" href="http://backbonetutorials.com/"></a>
<noscript><a href="http://flattr.com/thing/176986/Backbone-js-Tutorials" target="_blank">
<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript>
<div class="container">
<div class="menu">
<a href="/">home</a>
<a href="/examples.html">examples</a>
<!-- <a href="/contribute.html">contribute</a>-->
<a href="/about.html">about</a>
<a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a>
<a style="margin-left: 320px;" href="http://pledgie.com/campaigns/16174"><strong>donate</strong></a>
</div>
<div class="stack">
<div class="stackContent">
<h1>Backbone Tutorials</h1>
<p class="homepagedescription">This site is by no means the definitive guide to backbone.js and all corrections and contributions are welcome.</p>
<a style="margin-left: 20px;" href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a>
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
<hr>
<div id="post">
<h1>In progress</h1>
<h2>What is a collection?</h2>
<p>Backbone collections are simply an ordered set of <a href="/what-is-a-model">models</a>. Such that it can be used in situations such as;</p>
<ul>
<li>Model: Student, Collection: ClassStudents</li>
<li>Model: Todo Item, Collection: Todo List</li>
<li>Model: Animals, Collection: Zoo</li>
</ul>
<p>Typically your collection will only use one type of model but models themselves are not limited to a type of collection;</p>
<ul>
<li>Model: Student, Collection: Gym Class</li>
<li>Model: Student, Collection: Art Class</li>
<li>Model: Student, Collection: English Class</li>
</ul>
<p>Here is a generic Model/Collection example.</p>
<div class="highlight"><pre><code class="javascript"> <span class="kd">var</span> <span class="nx">Song</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Music is the answer"</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="kd">var</span> <span class="nx">Album</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">model</span><span class="o">:</span> <span class="nx">Song</span>
<span class="p">});</span>
</code></pre>
</div>
<h3>Building a collection</h3>
<p>Now we are going to populate a creation with some useful data.</p>
<div class="highlight"><pre><code class="javascript"> <span class="kd">var</span> <span class="nx">Song</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">name</span><span class="o">:</span> <span class="s2">"Not specified"</span><span class="p">,</span>
<span class="nx">artist</span><span class="o">:</span> <span class="s2">"Not specified"</span>
<span class="p">},</span>
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Music is the answer"</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="kd">var</span> <span class="nx">Album</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">model</span><span class="o">:</span> <span class="nx">Song</span>
<span class="p">});</span>
<span class="kd">var</span> <span class="nx">song1</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Song</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">"How Bizarre"</span><span class="p">,</span> <span class="nx">artist</span><span class="o">:</span> <span class="s2">"OMC"</span> <span class="p">});</span>
<span class="kd">var</span> <span class="nx">song2</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Song</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">"Sexual Healing"</span><span class="p">,</span> <span class="nx">artist</span><span class="o">:</span> <span class="s2">"Marvin Gaye"</span> <span class="p">});</span>
<span class="kd">var</span> <span class="nx">song3</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Song</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">"Talk It Over In Bed"</span><span class="p">,</span> <span class="nx">artist</span><span class="o">:</span> <span class="s2">"OMC"</span> <span class="p">});</span>
<span class="kd">var</span> <span class="nx">myAlbum</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Album</span><span class="p">([</span> <span class="nx">song1</span><span class="p">,</span> <span class="nx">song2</span><span class="p">,</span> <span class="nx">song3</span><span class="p">]);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span> <span class="nx">myAlbum</span><span class="p">.</span><span class="nx">models</span> <span class="p">);</span> <span class="c1">// [song1, song2, song3]</span>
</code></pre>
</div>
<h3>Relevant Links</h3>
<ul>
<li><a href="http://documentcloud.github.com/backbone/">Backbone.js official website</a></li>
</ul>
<h3>Author</h3>
<ul>
<li><a href="https://github.com/thomasdavis">Thomas Davis</a></li>
</ul>
<h3>Contributors</h3>
<ul>
<li>None</li>
</ul>
</div>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4db44541292b653d"></script>
<!-- AddThis Button END -->
<script>
var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9';
var idcomments_post_id;
var idcomments_post_url = 'http://backbonetutorials.com/what-would-you-use-backbone';
</script>
<span id="IDCommentsPostTitle" style="display:none"></span>
<script type='text/javascript' src='http://www.intensedebate.com/js/genericCommentWrapperV2.js'></script>
</div>
</div>
</div>
</div>
<script src="//static.getclicky.com/js" type="text/javascript"></script>
<script type="text/javascript">try{ clicky.init(66406579); }catch(e){}</script>
<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/66406579ns.gif" /></p></noscript>
</body>
</html>
|
