To gain a better understanding of Backbone.js, I decided to create a mock blog using Backbone.js. I added a 'create post' button that triggers the following code when clicked:
posts.create({title: makeid(),content: makeid()})
(makeId() generates random characters.)
When a post is created, it should dispatch an add event that I am listening for. However, the add event only fires once and I can't figure out why. I have inserted multiple console.log statements in the code to display my attempts. On the server side, I return all the models on creation but couldn't find documentation about what the server should return.
This is the content of app.js:
$(function(){
var Post = Backbone.Model.extend({
defaults:{
id: '',
title : 'Untitled',
content: 'No content'
},
urlRoot : '/posts/'
});
var Posts = Backbone.Collection.extend({
model : Post,
url: '/posts/'
});
var posts = new Posts;
var PostView = Backbone.View.extend({
tag: 'li',
template: _.template($("#post-template").html()),
events: {
"click .delete-post" : 'deletePost'
},
initialize: function(){
//this.listenTo(this.model, 'change', this.render);
this.listenTo(this.model, 'destroy', this.remove);
},
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
},
deletePost: function(){
console.log(this.model);
this.model.destroy();
this.$el.remove()
}
});
var AppView = Backbone.View.extend({
el : $("#home"),
events:{
"click #add-post": "addPost"
},
initialize: function(){
this.listenTo(posts, 'add', this.addOne);
posts.on("add", function(post){
console.log('post added: ' + post);
});
posts.fetch({ update: true });
},
addPost:function(){
console.log('add post')
posts.create({
title: makeid(),
content: makeid()
},{success: function(){console.log('success');}
});
},
addOne: function(post){
console.log('one was added');
var view = new PostView({model:post});
this.$("#posts").append(view.render().el);
},
render: function(){
if(posts.length){
console.log('rendering');
}
}
});
var appView = new AppView;
});
function makeid()
{
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for( var i=0; i < 5; i++ )
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
This is the structure of index.html:
<!doctype html>
<html>
<head>
<title>Backbone test</title>
<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="span6" id="home">
<a href="#" id="add-post" class="btn btn-mini btn-success">add post</a>
<ul id="posts">
</ul>
</div>
</div>
</div>
<script src="/static/js/jquery.js"></script>
<script src="/static/js/underscore.js"></script>
<script src="/static/js/backbone.js"></script>
<script src="/static/js/bootstrap.js"></script>
<script src="/static/js/app.js"></script>
<script id="post-template" type="text/x-handlebars-template">
<div class="span4">
<h3>
<%- title %>
<br />
<a href='#' class='btn btn-mini btn-primary'>edit</a>
<a href='#' class='btn btn-mini btn-danger delete-post'>delete</a>
</h3>
<p><%- content %></p>
</div>
</script>
</body>
</html>