Client-Side Data Modelling and more...

- Modelling in javascript
- Events
- Relationships
- Forms

Transcript

1. Client-Side Data Modeling Swaroop “STRIKER” Sethumadhavan @smswaroop
2. What is this about?
3. …obviously
4. …Again, what is it about? • Data Modeling • Validations • Better form submissions • AJAX • DRY and Re-usable code • …more
5. Model • Heart of any application • A single unit • Business Logic
6. A Simple JS Model function Person() { this.firstName = null; this.lastName = null; this.age = null; this.getFullName = function() { return [ this.firstName, this.lastName ].join(' '); }; this.isAllowedToBooze = function() { return this.age && this.age > 18; }; }
7. Adding Validations to Model function Person() { // Private variables var AGE_LIMIT = 13, hasErrors = false; this.firstName = null; this.errors = {}; .... this.canRegister = function() { return this.age && this.age >= AGE_LIMIT; }; // Validations this.isValid = function() { this.validate(); // And some logic here } this.validate = function() { if(!this.firstName) { addErrorFor('firstName', 'can\'t be empty'); } if(!this.age) { addErrorFor('age', 'can\'t be empty') } if(this.age && !this.canRegister()) { addErrorFor('age', 'can\'t be lesser than ' + AGE_LIMIT + ' years') } }; // Private Methods var addErrorFor = function(key, msg) { this.errors[key] = this.errors[key] || []; this.errors[key].push(msg); } }
8. Forms
9. An invite form <form action=“/invite"> <label for="email">Email:</label> <input type="email" id="email" data-field="email" name="email"> <label for="firstName">Firstname:</label> <input type="text" id="firstName" data-field="firstName" name="firstName"> <label for="age">Age:</label> <input type="number" id="age" data-field="age" name="age"> </form>
10. Initiate the view window.app = window.app || {}; app.inviteForm = { $el: null, init: function($el) { this.$el = $el; this.model = new Person(); // Assign attributes // Probably use jQuery } }; app.inviteForm.init(document.getElementById('form'));
11. Assign Attributes init: function() { this.$el.find(‘:input').each(function(index, field) { var $field = $(field), attr = $field.data('field'), val = attr.val(); if(attr) { this.model[attr] = val; } }.bind(this)); }
12. Submitting Form init: function() { ..... this.$el.submit(function(e) { if(this.model.isValid()) { // Normal Form Submit return true; } e.preventDefault(); // Render error messages }.bind(this)); }
13. Submit Form via AJAX function Person() { ... this.save = function() { $.ajax({ .... }) } } init: function() { ..... this.$el.submit(function(e) { if(this.model.isValid()) { this.model.save(); } }.bind(this)); }
14. Callbacks save: function() { $.ajax({ success: function() { this.afterSave(); }.bind(this) }); }, afterSave: function() { console.log('Finished Saving') } save: function() { this.beforeSave(function() { $.ajax({ success: function() { this.afterSave(); }.bind(this) }) }); }, beforeSave: function(callback) { console.log('Before Saving'); callback(); }
15. Relations hasOne: function() { return { name: 'address', className: Address } }, hasMany: function() { return { name: 'kids', className: Person } }, belongsTo: function() { return { name: 'company', className: 'Company' } }
16. Events • Subscribe for any events (Eg.: User avatar uploaded) • Publish (inform all the subscribers once uploaded) • Refresh respective views
17. Subscribe to Event window.app = window.app || {}; app.subscribers = []; app.subscribe = function(name, fn) { app.subscribers.push(name, fn); } app.publish = function(event) { var args = Array.prototype.slice.call(arguments, 1); // Find all subscribers and call subscriber[0].call(args); } app.inviteForm = { $el: null, init: function($el) { app.subscribe(‘person.avatar.upload’, function(url) { // Refresh the view }) } }; app.inviteForm.init(document.getElementById('form'));
18. Publish Event save: function() { $.ajax({ success: function() { app.publish(‘person.avatar.upload', '<url>'); } }); }
19. Frameworks • BackboneJS • Ember Data • …many more I guess! :D
20. `