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 (66 loc) • 2.91 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>Bind to img src attribute</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();
images = ['http://www.clickerzoneuk.co.uk/czone/wp-content/uploads/PuppySmall.jpg',
'http://cdn-www.dailypuppy.com/images/widget_box_example.jpg',
'http://1.bp.blogspot.com/-aMSukH1sRQo/TxANGNKjP9I/AAAAAAAAAA4/vjXU24foAUQ/s640/Cute+funny+dogs+puppy+eats+puppy.jpg'];
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,
events: {
'click #button': '_onButtonClick'
},
initialize:function () {
this._modelBinder = new Backbone.ModelBinder();
},
render:function () {
var html = '<button id="button">Click Me </button> to load the images via model binding.<br><br>';
var bindings = {};
var imageName;
for(var i = 0; i < images.length; i++){
imageName = 'image' + i;
html += 'Image ' + i + ' : ' + '<img name="' + imageName + '"/><br>';
bindings[imageName] = {selector: '[name=' + imageName + ']', elAttribute: 'src'};
}
this.$el.html(html);
this._modelBinder.bind(this.model, this.el, bindings);
return this;
},
_onButtonClick: function(){
for(var i = 0; i < images.length; i++){
var data = {};
data['image' + i] = images[i];
model.set(data);
}
}
});
view = new ViewClass({model:model});
$('#viewContent').append(view.render().el);
});
</script>
</head>
<body>
<br>
How to bind to images.<br>
<br>
<br>
Model data:
<div id="modelData"></div>
<hr>
<br>
<div id="viewContent"></div>
</body>
</html>