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
120 lines (92 loc) • 4.76 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>Test the CollectionBinder With the ElManagerFactory</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 type="text/javascript" src="../Backbone.CollectionBinder.js"></script>
<script>
$().ready(function () {
collection = new Backbone.Collection([
{id: 0, firstName: 'Adam', lastName: 'Zebra'},
{id: 1, firstName: 'Bob', phone: '1234567'}
]);
// Just create a simple view and attach the view's element to an existing DOM element
view = new Backbone.View();
view.setElement($('#viewContent'));
// Normally this will be in a separate html template file
var rowHtml = '<tr><td data-name="firstName"></td><td data-name="lastName"></td><td data-name="phone"></td></tr>';
// The managerFactory helps to generate element managers - an el manager creates/removes elements when models are added to a collection
// The 1st arg is the html template that is used to generate view elements for each model in the collection
// The 2nd arg is the DOM element attribute that is used to bind between the Model attributes and DOM elements - it's optional
var elManagerFactory = new Backbone.CollectionBinder.ElManagerFactory(rowHtml, "data-name");
collectionBinder = new Backbone.CollectionBinder(elManagerFactory);
// This is very similar to the ModelBinder.bind() function but the collectionBinder will also create nested element views
collectionBinder.bind(collection, view.$('tbody'));
// Demonstrating that the CollectionBinder has create/remove events you can listen to
collectionBinder.on('elCreated', function(model, el){
console.log('The collectionBinder created an element ', model, el);
// You can pass in a DOM element and get back which elManager is responsible for the element
// The elManager has more information like the model that is associated with the elManager
var elManager = collectionBinder.getManagerForEl(el);
console.log('\tThe elManager and model for the clicked element is ', elManager, elManager.getModel());
});
collectionBinder.on('elRemoved', function(model, el){
console.log('The collectionBinder removed an element ', model, el);
});
//////////////////////////////////////////////////////////////////////////////////////////////////
// The handlers below just help demonstrate that the rows in the table are bound to the collection
modelCreateCount = 2;
$('#createModel').on('click', function(){
collection.add({id: modelCreateCount, firstName: 'Jon ' + modelCreateCount, lastName: 'Doe ' + modelCreateCount, phone: 'xxx '});
modelCreateCount++;
});
$('#removeModel').on('click', function(){
if(collection.length > 0){
collection.remove(collection.at(collection.length - 1));
}
});
modelUpdateCount = 0;
$('#updateModel').on('click', function(){
if(collection.length > 0){
collection.at(collection.length - 1).set({phone: 'xxx ' + modelUpdateCount});
modelUpdateCount++;
}
});
$('#resetCollection').on('click', function(){
collection.reset();
});
});
</script>
</head>
<body>
<br>
Testing actions:
<br>
<input type="button" id="createModel" value="Create Model"/>
<input type="button" id="removeModel" value="Remove Last Model"/>
<input type="button" id="updateModel" value="Update Last Model's Phone"/>
<input type="button" id="resetCollection" value="Reset Collection"/>
<br>
<br>
View content:<hr>
<div id="viewContent">
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>