Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
88 lines (67 sloc) 3.1 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xml:lang="en" xmlns="">
<meta content="text/html;charset=UTF-8" http-equiv="Content-Type"/>
<title>Example - Nested Attributes</title>
<!-- include source files here... -->
<script type="text/javascript" src="../lib/underscore.js"></script>
<script type="text/javascript" src="../lib/jquery.js"></script>
<script type="text/javascript" src="../lib/backbone.js"></script>
<script type="text/javascript" src="deep-model.js"></script>
<script type="text/javascript" src="../Backbone.ModelBinder.js"></script>
$().ready(function () {
model = new Backbone.DeepModel({firstName:'Bob', home:{squareFeet:'2000', garage:{carCapacity:'2'}}});
model.bind('change', function () {
model.trigger('change'); // just to show the #modelData values initially, not needed for the ModelBinder
ViewClass = Backbone.View.extend({
initialize:function () {
this._modelBinder = new Backbone.ModelBinder();
render:function () {
var html = '\
Edit your information: <span name="firstName"></span> <br><br>\
<span class="label"> \
firstName: </span> <input type="text" name="firstName"/><br>\
home.squareFeet: <input type="text" name="home.squareFeet"/><br>\
home.garage.carCapacity: <input type="text" name="home.garage.carCapacity"/><br>\
var bindings = {
'firstName' : '[name=firstName]',
'home.squareFeet': {selector: '[name="home.squareFeet"]', converter: function(direction, value){
if(direction === Backbone.ModelBinder.Constants.ModelToView){
return value + ' sq feet';
else {
return value.replace(' sq feet', '');
'home.garage.carCapacity': '[name="home.garage.carCapacity"]'
this._modelBinder.bind(this.model, this.el, bindings);
return this;
view = new ViewClass({model:model});
Example to discuss : <a href=""> ModelBinder Issue 3 </a>
How to bind to nested attributes that are not Backbone Models.
Model data:
<div id="modelData"></div>
<div id="viewContent"></div>
Something went wrong with that request. Please try again.