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
133 lines (104 loc) • 5.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 3</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="../Backbone.ModelBinder.js"></script>
<script>
$().ready(function () {
model = new Backbone.Model({firstName:'Bob', graduated:'maybe', eyeColor: 'green', editableContent: 'Edit Me', hair: null});
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
var undefinedConverter = function(dir, val){
var allSelects = _.every(boundEls, function(boundEl){return $(boundEl).is('select')});
if(allSelects){
if(dir === Backbone.ModelBinder.ModelToView){
return val === undefined ? '' : val;
}
else {
return val === '' ? undefined : val;
}
}
else {
return val;
}
};
var nullConverter = function(dir, val, attName, model, boundEls){
var allSelects = _.every(boundEls, function(boundEl){return $(boundEl).is('select')});
if(allSelects){
if(dir === Backbone.ModelBinder.ModelToView){
return val === null ? '' : val;
}
else {
return val === '' ? null : val;
}
}
else {
return val;
}
};
Backbone.ModelBinder.SetOptions({converter: nullConverter});
ViewClass = Backbone.View.extend({
_modelBinder:undefined,
initialize:function () {
this._modelBinder = new Backbone.ModelBinder();
},
render:function () {
this.setElement($('#viewContent'));
var bindings = {
firstName: '[name=firstName]',
lastName: '[name=lastName]',
height: '[name=height]',
driversLicense:'[name=driversLicense]',
motorcycleLicense:'[name=motorcycleLicense]',
editableContent:'[name=editableContent]',
graduated:[{selector: '[name=graduated]'}, {selector: '[name=driversLicense],[name=motorcycleLicense]', elAttribute: 'enabled', converter: function(direction, value){return value === 'yes';}}],
eyeColor: [{selector: '[name=eyeColor]'}, {selector: 'span.label', elAttribute: 'style', converter: function(direction, value){return 'color:' + value}}],
hair: {selector: '[name=hair]'}
};
this._modelBinder.bind(this.model, this.el, bindings);
return this;
}
});
view = new ViewClass({model:model});
view.render();
});
</script>
</head>
<body>
<br>
In this example, the first, last and height labels are bound to the eye color attribute. The drivers license checkboxes are only enabled if the person graduated.
<br>
<br>
Model data:
<div id="modelData"></div>
<hr>
<br>
<div id="viewContent">
Edit your information: <span name="firstName"></span> <span name="lastName"></span><br><br>
Eye Color: Green: <input type="radio" name="eyeColor" value="green">
Blue: <input type="radio" name="eyeColor" value="blue">
Brown: <input type="radio" name="eyeColor" value="brown"><br><br>
<span class="label"> First Name: </span> <input type="text" name="firstName"/><br>
<span class="label"> Last Name: </span> <input type="text" name="lastName"/><br>
<span class="label"> Height: </span> <input type="text" name="height" value="Willy"><br><br>
Graduated: Yes: <input type="radio" id="graduated_yes" name="graduated" value="yes">
No: <input type="radio" id="graduated_no" name="graduated" value="no">
Maybe: <input type="radio" id="graduated_maybe" name="graduated" value="maybe"><br><br>
Drivers licence: <input type="checkbox" name="driversLicense"/><br>
Motorcycle license: <input type="checkbox" name="motorcycleLicense" /><br><br>
Hair: <select name="hair">
<option value="red">Red</option>
<option value="">Please select</option>
<option value="blond">Blond</option>
</select><br><br>
Content editable <div contentEditable name="editableContent"/>
</div>
</body>
</html>