Skip to content

Commit 9ca97c3

Browse files
thomasdavisthomasdavis
committed
asD
1 parent 09a14cb commit 9ca97c3

File tree

4 files changed

+267
-92
lines changed

4 files changed

+267
-92
lines changed

‎videos.textile

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
layout: default
3+
title: About Backbone Tutorials
4+
---
5+
6+
h2. About Backbone Tutorials
7+
8+
<iframe src="https://gumroad.com/l/yYwC" style="border: 0; width: 100%; height: 600px;"></iframe>

‎videos/beginner/README.md

+15-1
Original file line numberDiff line numberDiff line change
@@ -52,4 +52,18 @@ $.fn.serializeObject = function() {
5252
});
5353
return o;
5454
};
55-
```
55+
```
56+
57+
### Preventing XSS
58+
59+
As always you need to protect your users by encoding input and output, here is some simple methods for doing so.
60+
61+
```js
62+
function htmlEncode(value){
63+
return $('<div/>').text(value).html();
64+
}
65+
66+
function htmlDecode(value){
67+
return $('<div/>').html(value).text();
68+
}
69+
```

‎videos/beginner/index.completed.html

+179
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>BackboneTutorials.com Beginner Video</title>
6+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
7+
</head>
8+
<body>
9+
10+
11+
<div class="container">
12+
<h1>User Manager</h1>
13+
<hr />
14+
<div class="page"></div>
15+
</div>
16+
17+
18+
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
19+
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js" type="text/javascript"></script>
20+
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
21+
22+
<script type="text/template" id="user-list-template">
23+
<a href="#/new" class="btn btn-primary">New</a>
24+
<hr />
25+
<table class="table striped">
26+
<thead>
27+
<tr>
28+
<th>First Name</th><th>Last Name</th><th>Age</th><th></th>
29+
</tr>
30+
</thead>
31+
<tbody>
32+
<% _.each(users, function(user) { %>
33+
<tr>
34+
<td><%= htmlEncode(user.get('firstname')) %></td>
35+
<td><%= htmlEncode(user.get('lastname')) %></td>
36+
<td><%= htmlEncode(user.get('age')) %></td>
37+
<td><a class="btn" href="#/edit/<%= user.id %>">Edit</a></td>
38+
</tr>
39+
<% }); %>
40+
</tbody>
41+
</table>
42+
</script>
43+
44+
<script type="text/template" id="edit-user-template">
45+
<form class="edit-user-form">
46+
<legend><%= user ? 'Edit' : 'New' %> User</legend>
47+
<label>First Name</label>
48+
<input name="firstname" type="text" value="<%= user ? user.get('firstname') : '' %>">
49+
<label>Last Name</label>
50+
<input name="lastname" type="text" value="<%= user ? user.get('lastname') : '' %>">
51+
<label>Age</label>
52+
<input name="age" type="text" value="<%= user ? user.get('age') : '' %>">
53+
<hr />
54+
<button type="submit" class="btn"><%= user ? 'Update' : 'Create' %></button>
55+
<% if(user) { %>
56+
<input type="hidden" name="id" value="<%= user.id %>" />
57+
<button data-user-id="<%= user.id %>" class="btn btn-danger delete">Delete</button>
58+
<% }; %>
59+
</form>
60+
</script>
61+
62+
<script>
63+
function htmlEncode(value){
64+
return $('<div/>').text(value).html();
65+
}
66+
$.fn.serializeObject = function() {
67+
var o = {};
68+
var a = this.serializeArray();
69+
$.each(a, function() {
70+
if (o[this.name] !== undefined) {
71+
if (!o[this.name].push) {
72+
o[this.name] = [o[this.name]];
73+
}
74+
o[this.name].push(this.value || '');
75+
} else {
76+
o[this.name] = this.value || '';
77+
}
78+
});
79+
return o;
80+
};
81+
82+
$.ajaxPrefilter( function( options, originalOptions, jqXHR ) {
83+
options.url = 'http://backbonejs-beginner.herokuapp.com' + options.url;
84+
});
85+
86+
var Users = Backbone.Collection.extend({
87+
url: '/users'
88+
});
89+
90+
var User = Backbone.Model.extend({
91+
urlRoot: '/users'
92+
});
93+
94+
var UserListView = Backbone.View.extend({
95+
el: '.page',
96+
render: function () {
97+
var that = this;
98+
var users = new Users();
99+
users.fetch({
100+
success: function (users) {
101+
var template = _.template($('#user-list-template').html(), {users: users.models});
102+
that.$el.html(template);
103+
}
104+
})
105+
}
106+
});
107+
108+
var userListView = new UserListView();
109+
110+
var UserEditView = Backbone.View.extend({
111+
el: '.page',
112+
events: {
113+
'submit .edit-user-form': 'saveUser',
114+
'click .delete': 'deleteUser'
115+
},
116+
saveUser: function (ev) {
117+
var userDetails = $(ev.currentTarget).serializeObject();
118+
var user = new User();
119+
user.save(userDetails, {
120+
success: function (user) {
121+
router.navigate('', {trigger:true});
122+
}
123+
});
124+
return false;
125+
},
126+
deleteUser: function (ev) {
127+
this.user.destroy({
128+
success: function () {
129+
console.log('destroyed');
130+
router.navigate('', {trigger:true});
131+
}
132+
})
133+
},
134+
render: function (options) {
135+
var that = this;
136+
if(options.id) {
137+
that.user = new User({id: options.id});
138+
that.user.fetch({
139+
success: function (user) {
140+
var template = _.template($('#edit-user-template').html(), {user: user});
141+
that.$el.html(template);
142+
}
143+
})
144+
} else {
145+
var template = _.template($('#edit-user-template').html(), {user: null});
146+
that.$el.html(template);
147+
}
148+
}
149+
});
150+
151+
var userEditView = new UserEditView();
152+
153+
var Router = Backbone.Router.extend({
154+
routes: {
155+
"": "home",
156+
"edit/:id": "edit",
157+
"new": "edit",
158+
}
159+
});
160+
161+
var router = new Router;
162+
router.on('route:home', function() {
163+
// render user list
164+
userListView.render();
165+
})
166+
router.on('route:edit', function(id) {
167+
userEditView.render({id: id});
168+
})
169+
Backbone.history.start();
170+
</script>
171+
172+
173+
</body>
174+
</html>
175+
176+
<!--
177+
178+
http://stackoverflow.com/questions/1184624/convert-form-data-to-js-object-with-jquery
179+
-->

0 commit comments

Comments
 (0)