index.html
<html><head><title>Backbone.js Collection View example</title><!-- Dependencies --><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script src="http://underscorejs.org/underscore-min.js"></script><script src="http://backbonejs.org/backbone-min.js"></script><!-- The actual code --><script src="models.js"></script><script src="views.js"></script><script src="router.js"></script></head><body><h1>Backbone.js Collection View example</h1><!-- The empty table we'll use as the example --><table><thead><tr><th>Firstname</th><th>Lastname</th></tr></thead><!-- We'll attach the PeopleView to this element --><tbody></tbody></table></body></html>model.js
Models are where actual data is kept. They can also be used// for communicating between the server and the client through// methods like save() and fetch().//// Models are the abstract data and do not know how they are// supposed to be visualized. But they can perform validations// to ensure the data is correct.var models = {};// Our base model is "person"models.Person = Backbone.Model.extend({// Example of how to do a validation in a modelvalidate: function(attributes) {if (typeof attributes.firstname !== 'string') {// Return a failed validationreturn 'Firstname is mandatory';}if (typeof attributes.lastname !== 'string') {// Return a failed validationreturn 'Lastname is mandatory';}// All validations passed, don't return anything}});// People collectionmodels.People = Backbone.Collection.extend({model: models.Person});router.js// Router is responsible for driving the application. Usually // this means populating the necessary data into models and // collections, and then passing those to be displayed by // appropriate views. var Router = Backbone.Router.extend({ routes: { '': 'index' // At first we display the index route }, index: function() { // Initialize a list of people // In this case we provide an array, but normally you'd // instantiate an empty list and call people.fetch() // to get the data from your backend var people = new models.People([ { firstname: 'Arthur', lastname: 'Dent' }, { firstname: 'Ford', lastname: 'Prefect' } ]); // Pass the collection of people to the view var view = new views.People({ collection: people }); // And render it view.render(); // Example of adding a new person afterwards // This will fire the 'add' event in the collection // which causes the view to re-render people.add([ { firstname: 'Zaphod', lastname: 'Beeblebrox' } ]); } }); jQuery(document).ready(function() { // When the document is ready we instantiate the router var router = new Router(); // And tell Backbone to start routing Backbone.history.start(); });View.js
// Views are responsible for rendering stuff on the screen (well, // into the DOM). // // Typically views are instantiated for a model or a collection, // and they watch for change events in those in order to automatically // update the data shown on the screen. var views = {}; views.PeopleItem = Backbone.View.extend({ // Each person will be shown as a table row tagName: 'tr', initialize: function(options) { // Ensure our methods keep the `this` reference to the view itself _.bindAll(this, 'render'); // If the model changes we need to re-render this.model.bind('change', this.render); }, render: function() { // Clear existing row data if needed jQuery(this.el).empty(); // Write the table columns jQuery(this.el).append(jQuery('<td>' + this.model.get('firstname') + '</td>')); jQuery(this.el).append(jQuery('<td>' + this.model.get('lastname') + '</td>')); return this; } }); views.People = Backbone.View.extend({ // The collection will be kept here collection: null, // The people list view is attached to the table body el: 'tbody', initialize: function(options) { this.collection = options.collection; // Ensure our methods keep the `this` reference to the view itself _.bindAll(this, 'render'); // Bind collection changes to re-rendering this.collection.bind('reset', this.render); this.collection.bind('add', this.render); this.collection.bind('remove', this.render); }, render: function() { var element = jQuery(this.el); // Clear potential old entries first element.empty(); // Go through the collection items this.collection.forEach(function(item) { // Instantiate a PeopleItem view for each var itemView = new views.PeopleItem({ model: item }); // Render the PeopleView, and append its element // to the table element.append(itemView.render().el); }); return this; } });
0 comments :
Post a Comment