grunt-doctrine
Version:
Grunt plugin to convert doctrine xml annotations into backbone models and collections. Useful in conjunction with doctrine apigility. Includes option to scaffold an entire BBB application
88 lines (67 loc) • 3.18 kB
HTML
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<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>
<script>
$().ready(function () {
model = new Backbone.DeepModel({firstName:'Bob', home:{squareFeet:'2000', garage:{carCapacity:'2'}}});
model.bind('change', function () {
$('#modelData').html(JSON.stringify(model.toJSON()));
});
model.trigger('change'); // just to show the #modelData values initially, not needed for the ModelBinder
ViewClass = Backbone.View.extend({
_modelBinder:undefined,
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>\
';
this.$el.html(html);
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});
$('#viewContent').append(view.render().el);
});
</script>
</head>
<body>
<br>
Example to discuss : <a href="https://github.com/theironcook/Backbone.ModelBinder/issues/3"> ModelBinder Issue 3 </a>
<br>
How to bind to nested attributes that are not Backbone Models.
<br>
<br>
Model data:
<div id="modelData"></div>
<hr>
<br>
<div id="viewContent"></div>
</body>
</html>