12. max catnip
$(“.kitten-delete”).click(function () {
// Find the ID of the kitten
var id = $(this).closest(“.kitten-row”).attr(“kitten-id”);
// Do the delete request
$.ajax(
url: “/rest/kittens/1”,
type: “DELETE”
});
13. max catnip
$(“.kitten-delete”).click(function () {
// Find the ID of the kitten
var kittenRow = $(this).closest(“.kitten-row”);
var id = kittenRow.attr(“kitten-id”);
// Do the delete request
$.ajax(
url: “/rest/kittens/1”,
type: “DELETE”,
success: function () {
kittenRow.remove();
}
});
14.
15. i haz a sad
my data is tightly coupled to my DOM
23. models
where we keep our data
+ utility functions
// Create a Kitten model by extending Backbone.Model
var Kitten = Backbone.Model.extend({
// something we want all kittens to do
play: function () {
console.log("Playing with " + this.model.get("plaything"));
}
}
25. models
access data via set and get
can validate data easily
// Create a Kitten model by extending Backbone.Model
var Kitten = Backbone.Model.extend({
// validate our data by overriding the method
// in Backbone.Model
validate: function(attrs) {
if (attrs.plaything == “dog”) {
// error
return “You haven’t watched enough Hanna-Barbera cartoons.”
}
}
}
// Instantiate a kitten.
var max = new Kitten();
max.set({plaything: "twine"});
26. collections
arrays of model instances
// Create a collection of kittens!
var Kittens = Backbone.Collection.extend({
model: Kitten // default model
}
var kittens = new Kittens;
kittens.add({name: “Max”}); whenever you add a new item,
kittens.add({name: “Orhan”}); an add event is fired. useful!
e.g.
kittens.bind(add, function(kitten) {
alert(“Hi “ + kitten.get(“name”));
}
27. collections
populating collections
var Kittens = Backbone.Collection.extend({
model: Kitten
url: ‘/rest/kittens’
}
var kittens = new Kittens;
kittens.fetch();
28. collections
syncing with the server
var Kittens = Backbone.Collection.extend({
model: Kitten
url: ‘/rest/kittens’
}
var kittens = new Kittens;
kittens.fetch();
29. models
syncing with the server
var Kitten = Backbone.Model.extend({
url: ‘/rest/kittens’
}
30. collections
backbone.sync
The default sync handler maps CRUD to REST like so:
◦ create → POST /collection
◦ read → GET /collection[/id]
◦ update → PUT /collection/id
◦ delete → DELETE /collection/id
31. each model has an associated view
max has a
model
view
both models are in a
Kittens collection
(they could be in others too! like a
CuteThings collection. doesn’t have
orhan has a to be a 1-1 mapping)
model
view
32. views
let’s create views for our kittens
// Getting Max out of our kitten collection, he had an ID of 1
var max = kittens.get(1);
// We’ll look at the view in detail next
new KittenView({model: max});
33. views
var KittenView = Backbone.View.extend({
tagName: “tr”,
className: “kitten-row”,
template: _.template($(“#kitten-template”).html()),
render: function() {
$(this.el).html(this.template(this.model.toJSON())));
return this;
}
});
this will return some HTML
all views have an
associated element
34. views
let’s do some add in that feature
var KittenView = Backbone.View.extend({
tagName: “tr”,
className: “kitten-row”,
template: _.template($(“#kitten-template”).html()),
events: {
“keypress .delete-icon”: “destroyKitten”
}
destroyKitten: function() {
this.model.destroy();
}
render: function() {
$(this.el).html(this.template(this.model.toJSON())));
return this;
}
});
