Skip to content

Commit 41e6a38

Browse files
arturadibarturadib
committed
Using docco
1 parent 10c6569 commit 41e6a38

19 files changed

+756
-325
lines changed

‎1.html

+1-38
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,16 @@
1-
<!--
2-
*
3-
*
4-
* Minimalistic use of the View class
5-
*
6-
*
7-
-->
8-
91
<!DOCTYPE html>
102
<html>
113

124
<head>
135
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
146
<title>hello-backbonejs</title>
157

16-
<!-- jQuery -->
178
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
18-
<!-- JSON2: offers cross-browser .parse() and .stringify(); mostly for Backbone.sync() -->
199
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js" type="text/javascript" charset="utf-8"></script>
20-
<!-- Underscore utilities are widely used by Backbone -->
2110
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js" type="text/javascript" charset="utf-8"></script>
22-
<!-- Backbone -->
2311
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js" type="text/javascript" charset="utf-8"></script>
2412

25-
<script type="text/javascript" charset="utf-8">
26-
$(function(){
27-
//
28-
// Classes
29-
//
30-
var MyView = Backbone.View.extend({
31-
el: $('body'), // el attaches view to existing html element
32-
initialize: function(){
33-
_.bindAll(this, 'render'); // Underscore function to ensure methods like render() see "this" as the current object
34-
},
35-
render: function(){
36-
$(this.el).append('<div>hello world!</div>'); // append to body
37-
}
38-
});
39-
40-
//
41-
// Objects
42-
//
43-
var myView = new MyView();
44-
45-
//
46-
// Actions
47-
//
48-
myView.render();
49-
});
50-
</script>
13+
<script src="1.js" type="text/javascript" charset="utf-8"></script>
5114
</head>
5215

5316
<body>

‎1.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// _Working example: [1.html](../1.html)._
2+
//
3+
// **This example illustrates the declaration and instantiation of a View.**
4+
5+
// jQuery's document ready function
6+
$(function(){
7+
// **Class ListView**: This is the main view for our program.
8+
var ListView = Backbone.View.extend({
9+
el: $('body'), // attaches `this.el` to an existing element.
10+
// `initialize()`: Called upon instantiation. Where you make all types of bindings, _excluding_ UI events, such as clicks, etc.
11+
initialize: function(){
12+
_.bindAll(this, 'render'); // fixes loss of context for 'this' within methods
13+
14+
this.render(); // not all views are self-rendering. This one is.
15+
},
16+
// `render()`: Where you mess with `this.el`. Needs to be manually called by the user.
17+
render: function(){
18+
$(this.el).append("<ul> <li>hello world</li> </ul>");
19+
}
20+
});
21+
22+
// **Instance listView**
23+
var listView = new ListView();
24+
});

‎2.html

+1-46
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,3 @@
1-
<!--
2-
*
3-
*
4-
* View and Model working together
5-
* - The View is for a single Model
6-
*
7-
*
8-
-->
9-
101
<!DOCTYPE html>
112
<html>
123

@@ -19,43 +10,7 @@
1910
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js" type="text/javascript" charset="utf-8"></script>
2011
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js" type="text/javascript" charset="utf-8"></script>
2112

22-
<script type="text/javascript" charset="utf-8">
23-
$(function(){
24-
//
25-
// Classes
26-
//
27-
var Item = Backbone.Model.extend({
28-
defaults: {
29-
first: 'hello',
30-
second: 'world'
31-
}
32-
});
33-
34-
var ItemView = Backbone.View.extend({
35-
el: $('body'), // el attaches view to existing html element
36-
initialize: function(){
37-
_.bindAll(this, 'render'); // Underscore function to ensure methods like render() see "this" as the current object
38-
},
39-
render: function(){
40-
$(this.el).append('<div style="color:red;">'+this.model.get('first')+' '+this.model.get('second')+'</div>'); // display model data
41-
}
42-
});
43-
44-
//
45-
// Objects
46-
//
47-
var item = new Item(); // use model defaults
48-
49-
var itemView = new ItemView({
50-
model: item
51-
});
52-
53-
//
54-
// Actions
55-
//
56-
itemView.render();
57-
});
58-
</script>
13+
<script src="2.js" type="text/javascript" charset="utf-8"></script>
5914
</head>
6015

6116
<body>

‎2.js

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
$(function(){
2+
//
3+
// Classes
4+
//
5+
var ListView = Backbone.View.extend({
6+
el: $('body'), // el attaches to existing element
7+
events: {
8+
// DOM events
9+
'click button#add': 'appendItem'
10+
},
11+
initialize: function(){
12+
_.bindAll(this, 'render', 'appendItem'); // every function that uses 'this' as the current object should be in here
13+
14+
this.counter = 1;
15+
this.render(); // self-renders
16+
},
17+
render: function(){
18+
$(this.el).append("<button id='add'>Add list item</button>");
19+
$(this.el).append("<ul></ul>");
20+
},
21+
appendItem: function(){
22+
$('ul', this.el).append("<li>hello world"+this.counter+"</li>");
23+
this.counter++;
24+
}
25+
});
26+
27+
//
28+
// Instances
29+
//
30+
var listView = new ListView();
31+
});

‎3.html

+1-62
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,3 @@
1-
<!--
2-
*
3-
*
4-
* Model, Collection, and View working together
5-
* - Shows how to bind a Collection event ('add') to a View method
6-
* - Illustrates use of a single View to render multiple Models of a Collection
7-
*
8-
*
9-
-->
10-
111
<!DOCTYPE html>
122
<html>
133

@@ -20,61 +10,10 @@
2010
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js" type="text/javascript" charset="utf-8"></script>
2111
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js" type="text/javascript" charset="utf-8"></script>
2212

23-
<script type="text/javascript" charset="utf-8">
24-
$(function(){
25-
//
26-
// Classes
27-
//
28-
var Item = Backbone.Model.extend({
29-
defaults: {
30-
part1: 'hello',
31-
part2: 'world'
32-
}
33-
});
34-
35-
var List = Backbone.Collection.extend({
36-
model: Item
37-
});
38-
39-
var ListView = Backbone.View.extend({
40-
el: $('body ul'), // attach to existing list
41-
initialize: function(){
42-
_.bindAll(this, 'appendLast');
43-
44-
// Model-View bindings happen here:
45-
this.collection.bind('add', this.appendLast); // appendLast() to be called upon every 'add' event in our collection
46-
},
47-
appendLast: function(){
48-
var part1 = _(this.collection.models).last().get('part1'); // gets data from last model (collection.models are arrays)
49-
var part2 = _(this.collection.models).last().get('part2');
50-
$(this.el).append('<li style="color:green;">'+part1+' '+part2+'</li>');
51-
}
52-
});
53-
54-
//
55-
// Objects
56-
//
57-
var list = new List();
58-
59-
var listView = new ListView({
60-
collection: list
61-
});
62-
63-
//
64-
// Actions
65-
//
66-
$('button#add').click(function(){
67-
var item = new Item();
68-
list.add(item); // adds item to collection and fires 'add' event
69-
});
70-
});
71-
</script>
13+
<script src="3.js" type="text/javascript" charset="utf-8"></script>
7214
</head>
7315

7416
<body>
75-
<button id='add'>Add item</button>
76-
<ul>
77-
</ul>
7817
</body>
7918

8019
</html>

‎3.js

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
$(function(){
2+
//
3+
// Models
4+
//
5+
var Item = Backbone.Model.extend({
6+
defaults: {
7+
part1: 'hello',
8+
part2: 'world'
9+
}
10+
});
11+
12+
var List = Backbone.Collection.extend({
13+
model: Item
14+
});
15+
16+
//
17+
// Views
18+
//
19+
var ListView = Backbone.View.extend({
20+
el: $('body'), // el attaches to existing element
21+
events: {
22+
// DOM events
23+
'click button#add': 'addItem'
24+
},
25+
initialize: function(){
26+
_.bindAll(this, 'render', 'addItem', 'appendItem'); // every function that uses 'this' as the current object should be in here
27+
28+
this.counter = 1; // global item counter
29+
this.render(); // self-renders
30+
31+
// Model events
32+
this.collection.bind('add', this.appendItem);
33+
},
34+
render: function(){
35+
$(this.el).append("<button id='add'>Add list item</button>");
36+
$(this.el).append("<ul></ul>");
37+
_(this.collection.models).each(function(item){ // in case collection is not empty
38+
appendItem(item);
39+
}, this);
40+
},
41+
addItem: function(){
42+
var item = new Item();
43+
item.set({
44+
part2: item.get('part2') + this.counter // modify item defaults
45+
});
46+
this.collection.add(item); // add item to collection; view is updated via event 'add'
47+
this.counter++;
48+
},
49+
appendItem: function(item){
50+
$('ul', this.el).append("<li>"+item.get('part1')+" "+item.get('part2')+"</li>");
51+
}
52+
});
53+
54+
//
55+
// Instances
56+
//
57+
var list = new List();
58+
var listView = new ListView({
59+
collection: list
60+
});
61+
});

0 commit comments

Comments
 (0)