Skip to content

Commit 4ebb5ad

Browse files
fprezatfprezat
committed
Updating examples
1 parent 3fe5c77 commit 4ebb5ad

6 files changed

+249
-95
lines changed

‎backbone-collection.html

+3-16
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,6 @@ <h6><%= article.title %></h6>
3939
<!-- === ici votre code applicatif === -->
4040
<script>
4141
var Article = Backbone.Model.extend({
42-
urlRoot: "/article",
43-
4442
defaults: {
4543
"id": "0",
4644
"title": "Titre par défaut",
@@ -49,9 +47,6 @@ <h6><%= article.title %></h6>
4947

5048
initialize: function() {
5149
console.log('Here init Article model');
52-
this.on("change:title", function() {
53-
console.log('title has changed : ' + this.get('title'));
54-
});
5550
},
5651

5752
});
@@ -68,11 +63,6 @@ <h6><%= article.title %></h6>
6863

6964
initialize: function () {
7065
this.template = _.template($("#articles-collection-template").html());
71-
72-
_.bindAll(this , "render");
73-
this.collection.bind("change", this.render);
74-
this.collection.bind("add", this.render);
75-
this.collection.bind("remove", this.render);
7666
},
7767

7868
render: function () {
@@ -84,15 +74,12 @@ <h6><%= article.title %></h6>
8474
});
8575

8676
var articleCollection = new ArticlesCollection;
87-
articleCollection.add( new Article({ id:15, title:"mon title" }) );
88-
articleCollection.add( new Article({ id:14, title:"super" }) );
89-
articleCollection.add( new Article({ id:16, title:"génial" }) );
77+
articleCollection.add( new Article({ id:15, title:"Title 1" }) );
78+
articleCollection.add( new Article({ id:14, title:"Title 2" }) );
79+
articleCollection.add( new Article({ id:16, title:"Title 3" }) );
9080

9181
articleView = new ArticlesView({ collection: articleCollection });
9282
articleView.render();
9383

94-
//articleCollection.models[0].set('title', 'Allo')
95-
//articleCollection.models[0].save()
96-
9784
</script>
9885
</html>

‎backbone-event-aggregator-pattern.html

+3-2
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
<div class="row">
1919
<div class="col-sm-12 main">
2020
<h1 class="page-header">Dashboard</h1>
21+
<p>Propager les évènements d'un conteneur 1 vers un conteneur 2</p>
2122
<script type="text/template" id="view-one-template">
2223
<h2>View one</h2>
2324
<p>Some text</p>
@@ -62,7 +63,7 @@ <h2>View two</h2>
6263
this.vent = options.vent;
6364
var _this = this;
6465
this.vent.on("container_updated", function(msg){
65-
alert(msg);
66+
alert('view2 send ' + msg);
6667
});
6768
},
6869

@@ -103,7 +104,7 @@ <h2>View two</h2>
103104
var _this = this;
104105
this.vent.on("alert", function(msg) {
105106
console.log(_this.vent);
106-
_this.status = msg;
107+
_this.status = 'message received from view 1 ' + msg;
107108
_this.render();
108109
_this.vent.trigger("container_updated", "ok message received and container updated");
109110
});

‎backbone-events.html

+4-2
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@
1414
</style>
1515
</head>
1616
<body>
17-
Hello
17+
<div class="container">
18+
<p id="test">Hello</p>
19+
</div>
1820
</body>
1921
<!-- === Références aux Frameworks === -->
2022
<script src="js/jquery.js"></script>
@@ -29,7 +31,7 @@
2931
_.extend(object, Backbone.Events);
3032

3133
object.on("alert", function(msg) {
32-
alert("Triggered " + msg);
34+
jQuery('#test').append("Backbone Event triggered " + msg);
3335
});
3436

3537
object.trigger("alert", "an event");

‎backbone-namespacing.html

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<title>Backbone</title>
6+
<!-- === Styles Twitter Bootstrap -->
7+
<link href="css/bootstrap.min.css" rel="stylesheet">
8+
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
9+
<link href="css/dashboard.css" rel="stylesheet">
10+
<style>
11+
.slack {
12+
background-color: #563A59;
13+
}
14+
</style>
15+
</head>
16+
<body>
17+
<div class="container-fluid">
18+
<div class="row">
19+
<div class="col-sm-12 main">
20+
<h1 class="page-header">Dashboard</h1>
21+
<script type="text/template" id="articles-collection-template" >
22+
<% _.each(articles, function (article) { %>
23+
<h1><%= article.id %></h1>
24+
<h6><%= article.title %></h6>
25+
<p><%= article.description %></p>
26+
<% }); %>
27+
</script>
28+
<!-- les données seront affichées ici -->
29+
<div id="articles-collection-container" ></div>
30+
</div>
31+
</div>
32+
</div>
33+
</body>
34+
<!-- === Références aux Frameworks === -->
35+
<script src="js/jquery.js"></script>
36+
<script src="js/underscore.js"></script>
37+
<script src="js/backbone.js"></script>
38+
<script src="js/bootstrap.min.js"></script>
39+
<!-- === ici votre code applicatif === -->
40+
<script>
41+
window.App = {
42+
Models: {},
43+
Collections: {},
44+
Views: {}
45+
};
46+
47+
App.Models.Article = Backbone.Model.extend({
48+
defaults: {
49+
"id": "0",
50+
"title": "Titre par défaut",
51+
"description": "ma description"
52+
},
53+
54+
initialize: function() {
55+
console.log('Here init Article model');
56+
}
57+
});
58+
59+
App.Collections.Article = Backbone.Collection.extend({
60+
model : App.Models.Article,
61+
initialize : function () {
62+
console.log("Création d’une collection d’articles");
63+
}
64+
});
65+
66+
App.Views.Article = Backbone.View.extend({
67+
el: $("#articles-collection-container"),
68+
69+
initialize: function () {
70+
this.template = _.template($("#articles-collection-template").html());
71+
},
72+
73+
render: function () {
74+
var renderedContent = this.template({ articles : this.collection.toJSON() });
75+
$(this.el).html(renderedContent);
76+
}
77+
78+
});
79+
80+
var articleCollection = new App.Collections.Article;
81+
articleCollection.add( new App.Models.Article({ id:15, title:"Title 1" }) );
82+
articleCollection.add( new App.Models.Article({ id:14, title:"Title 2" }) );
83+
articleCollection.add( new App.Models.Article({ id:16, title:"Title 3" }) );
84+
85+
articleView = new App.Views.Article({ collection: articleCollection });
86+
articleView.render();
87+
// Models / Collections / Views are available in console
88+
// try type App.Models
89+
90+
</script>
91+
</html>

‎backbone-view-events.html

+148
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<title>Backbone</title>
6+
<!-- === Styles Twitter Bootstrap -->
7+
<link href="css/bootstrap.min.css" rel="stylesheet">
8+
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
9+
<link href="css/dashboard.css" rel="stylesheet">
10+
<style>
11+
.slack {
12+
background-color: #563A59;
13+
}
14+
</style>
15+
</head>
16+
<body>
17+
<div class="container-fluid">
18+
<div class="row">
19+
<div class="col-sm-12 main">
20+
<h1 class="page-header">Dashboard</h1>
21+
<form id="create-user">
22+
<input type="text" value="" placeholder="Add new user" name="article" />
23+
<button type="submit">Ajouter</button>
24+
</form>
25+
<script type="text/template" id="article-tpl" >
26+
<h1><%= article.id %></h1>
27+
<h6><%= article.title %></h6>
28+
<p><%= article.description %></p>
29+
<button class="edit">Edit</button>
30+
<button class="delete">Delete</button>
31+
</script>
32+
<!-- les données seront affichées ici -->
33+
<div id="articles-collection-container" ></div>
34+
</div>
35+
</div>
36+
</div>
37+
</body>
38+
<!-- === Références aux Frameworks === -->
39+
<script src="js/jquery.js"></script>
40+
<script src="js/underscore.js"></script>
41+
<script src="js/backbone.js"></script>
42+
<script src="js/bootstrap.min.js"></script>
43+
<!-- === ici votre code applicatif === -->
44+
<script>
45+
window.App = {
46+
Models: {},
47+
Collections: {},
48+
Views: {}
49+
};
50+
51+
App.Models.Article = Backbone.Model.extend({
52+
defaults: {
53+
"id": "0",
54+
"title": "Titre par défaut",
55+
"description": "ma description"
56+
},
57+
58+
initialize: function() {
59+
console.log('Here init Article model');
60+
this.on("change:title", function() {
61+
console.log('title has changed : ' + this.get('title'));
62+
});
63+
}
64+
});
65+
66+
App.Collections.Article = Backbone.Collection.extend({
67+
model : App.Models.Article,
68+
initialize : function () {
69+
console.log("Création d’une collection d’articles");
70+
}
71+
});
72+
73+
App.Views.Articles = Backbone.View.extend({
74+
el: "#articles-collection-container",
75+
initialize: function () {
76+
this.collection.on('add', this.printArticle, this);
77+
},
78+
79+
render: function () {
80+
this.collection.each(this.printArticle, this);
81+
},
82+
83+
printArticle: function(article) {
84+
var articleView = new App.Views.Article({ model: article });
85+
$(this.el).append(articleView.render().el);
86+
}
87+
});
88+
89+
App.Views.Article = Backbone.View.extend({
90+
initialize: function () {
91+
this.template = _.template($("#article-tpl").html());
92+
this.model.on('change', this.render, this);
93+
this.model.on('remove', this.remove, this);
94+
},
95+
96+
events: {
97+
'click .edit' : 'editArticle',
98+
'click .delete' : 'deleteArticle'
99+
},
100+
101+
editArticle: function() {
102+
var newTitle = prompt("Please enter the new name", this.model.get('title'));
103+
if( !newTitle ) return;
104+
this.model.set('title', newTitle);
105+
},
106+
107+
deleteArticle: function() {
108+
// Will not trigger sync stuff !!
109+
console.log('Model ' + this.model.get('id') + ' deleted');
110+
this.model.set('id', null);
111+
this.model.destroy();
112+
},
113+
114+
remove: function() {
115+
$(this.el).remove();
116+
},
117+
118+
render: function () {
119+
var renderedContent = this.template({ article : this.model.toJSON() });
120+
$(this.el).html(renderedContent);
121+
return this;
122+
}
123+
});
124+
125+
App.Views.AddUser = Backbone.View.extend({
126+
el: "#create-user",
127+
events: {
128+
"submit": "submit"
129+
},
130+
131+
submit:function(e) {
132+
e.preventDefault();
133+
var articleName = $(e.target).find('input[name="article"]').val();
134+
var article = new App.Models.Article({ title: articleName });
135+
this.collection.add( article );
136+
}
137+
});
138+
139+
var articleCollection = new App.Collections.Article;
140+
articleCollection.add( new App.Models.Article({ id:15, title:"Title 1" }) );
141+
articleCollection.add( new App.Models.Article({ id:14, title:"Title 2" }) );
142+
articleCollection.add( new App.Models.Article({ id:16, title:"Title 3" }) );
143+
144+
articleView = new App.Views.Articles({ collection: articleCollection });
145+
addUserView = new App.Views.AddUser({ collection: articleCollection });
146+
articleView.render();
147+
</script>
148+
</html>

0 commit comments

Comments
 (0)