The following code example illustrates how to add user form data to collections using backboneJS.
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/underscore.js"></script>
<script src="js/backbone-min.js"></script>
<script src="js/backbone.syphon.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var Person = Backbone.Model.extend({
defualts : {
first_name : 'qwe',
last_name : 'ewq',
id : 0
}
});
var PersonCollection = Backbone.Collection.extend({
model : Person
});
var idGen = 1;
var PersonView = Backbone.View.extend({
el : $("#personDisplay"),
tmpl : _.template($("#personTemplate").html()),
editTmpl : _.template($("#editPersonTemplate").html()),
render : function() {
if (this.model.id != 0) {
$(this.el).append(this.tmpl(this.model.toJSON()));
} else {
$(this.el).append(this.editTmpl(null));
}
}
});
var PersonMasterView = Backbone.View.extend({
el : $("#displayForm"),
editTmpl : _.template($("#editPersonTemplate").html()),
events : {
"click #addUser" : "addUsr",
"click #save" : "add"
},
initialize : function() {
this.collection = new PersonCollection();
this.render();
},
render : function() {
//
$("#personDisplay").html('');
_.each(this.collection.models, function(item) {
//alert('collection iteratin->'+item.id);
var perView = new PersonView({
model : item
});
perView.render();
}, this);
},
add : function(e) {
e.preventDefault();
idGen = idGen + 1;
var data = (Backbone.Syphon.serialize(this));
var that = this;
data.id = idGen;
console.log(data);
//this.model.set(data);
this.collection.add(data);
//this.remove();
this.render();
},
addUsr : function() {
var prsn = new Person({
id : 0
});
this.collection.add(prsn);
this.render();
},
});
var pView = new PersonMasterView();
});
</script>
</head>
<body>
<div id="displayForm">
<button id="addUser">
User Form
</button>
<div id="personDisplay">
</div>
<div id="personFormDisplay">
</div>
</div>
<script id="editPersonTemplate" type="text/template">
<form id="">
first name: <input id="first_name" name="first_name" value="" type="text"><br/>
last name: <input id="last_name" name="last_name" value="" type="text"><br/>
<button id="save">Save</button>
</form>
</script>
<script id="personTemplate" type="text/template">
<div>
<label>first name:</label> <%= first_name %>
<label>last name:</label> <%= last_name %>
</div>
</script>
</body>
</html>