<!DOCTYPE HTML>
<html>
<head>
<title>Zombie Views</title>
<link href="style.css">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div id="app" class="container">
<h1>Zombie Generator 3000</h1>
<button id="add" class="btn btn-primary">Add</button> <button id="remove-all" class="btn btn-primary">Remove All</button>
<ol id="bin"></ol>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
// Model
// ------------------
var Model = Backbone.Model.extend({
defaults: {
text: 'Zombie'
}
});
// View
// ------------------
var View = Backbone.View.extend({
tagName: 'li',
className: 'zombie',
template: _.template('<%= text %>'),
initialize: function () {
this.model.on( 'change', this.render, this );
this.options.parent.on( 'close:all', this.close, this );
},
events: {
'click': 'close'
},
render: function () {
this.$el.html( this.template( this.model.toJSON() ));
return this;
},
close: function () {
console.log('Kill: ', this);
this.unbind();
this.remove();
}
});
// App Level View
// ------------------
var AppView = Backbone.View.extend({
el: '#app',
events: {
'click #add': 'addView',
'click #remove-all': 'closeAll'
},
addView: function () {
var model = new Model();
var view = new View({
model: model,
parent: this
});
$('#bin').append(view.render().el);
},
closeAll: function () {
this.trigger('close:all');
}
});
// DOC Ready
// ------------------
$(function() {
var appView = new AppView();
});