Skip to content

Instantly share code, notes, and snippets.

@nilesh
Forked from forxina/gist:1232482
Created January 30, 2012 12:36
Show Gist options
  • Save nilesh/1704188 to your computer and use it in GitHub Desktop.
Save nilesh/1704188 to your computer and use it in GitHub Desktop.
fixed up backbone example to work with Backbone.js 0.5.3
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Backbone example</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript" src="backbone.js"></script>
<script type="text/javascript" src="mustache.js"></script>
<script type="text/javascript">
var Movie = Backbone.Model.extend({
validate: function(attrs) {
if (attrs.title) {
if (!_.isString(attrs.title) || attrs.title.length === 0) {
return 'Title must be a string with a length';
}
}
}
});
var MovieCollection = Backbone.Collection.extend({
model: Movie
});
var MovieView = Backbone.View.extend({
initialize: function(args) {
_.bindAll(this, 'changeTitle');
this.model.bind('change:title', this.changeTitle);
},
events: {
'click .title': 'handleTitleClick'
},
render: function() {
var template = '\
<li id="movie_{{ cid }}"><span class="title">{{ title }}</span> <span>{{ format }}</span> <a href="#movies/remove/{{ cid }}">x</a></li>\
';
var context = _.extend(this.model.toJSON(), {cid: this.model.cid});
$(this.el).html(Mustache.to_html(template, context));
return this;
},
changeTitle: function() {
this.$('.title').text(this.model.get('title'));
},
handleTitleClick: function() {
alert('you clicked the title: '+this.model.get('title'));
}
});
var MovieAppModel = Backbone.Model.extend({
initialize: function() {
this.movies = new MovieCollection();
}
});
var MovieAppView = Backbone.View.extend({
initialize: function() {
_.bindAll(this, "addMovie", "removeMovie");
this.model.movies.bind('add', this.addMovie);
this.model.movies.bind('remove', this.removeMovie);
},
render: function() {
var template = '\
<h1>Movie App</h1>\
<a href="#movies/add">add new movie</a>\
<ul id="movieList"></ul>';
$(this.el).html(Mustache.to_html(template, this.model.toJSON()));
this.movieList = this.$('#movieList');
return this;
},
addMovie: function(movie) {
var view = new MovieView({model: movie});
this.movieList.append(view.render().el);
},
removeMovie: function(movie) {
this.$('#movie_'+movie.cid).remove();
}
});
var MovieAppRouter = Backbone.Router.extend({ //(Backbone.js 0.5.3, use Router instead of Controller)
initialize: function(params) {
this.model = new MovieAppModel();
this.view = new MovieAppView({model: this.model});
params.append_at.append(this.view.render().el);
},
routes: {
"movies/add": "add",
"movies/remove/:number": "remove",
},
add: function() {
app.model.movies.add(new Movie({
title: 'The Matrix ' + Math.floor(Math.random()*11),
format: 'dvd',
})
);
this.navigate('movies'); // reset location so we can trigger again (Backbone.js 0.5.3, use navigate instead of saveLocation)
},
remove: function(cid) {
app.model.movies.remove(app.model.movies.getByCid(cid));
},
});
$(function() {
var movieApp = new MovieAppRouter({append_at: $('body')});
window.app = movieApp;
Backbone.history.start();
});
</script>
</head>
<body>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment