javascript - Backbone.js / jQuery Form Submission -
i seem having issue little snippet. i've fiddled quite time , never seems catch form submission, no matter how set view object. i've come understand backbone, view model supposed tie dom through jquery (although not necessary), why planned on catching submit in fashion ensure simple serialization , ajax posting. although, every time submit never see "caught submission!" in console log.
any issue appreciated.
jsfiddle: http://jsfiddle.net/alexgurrola/3a2hrhl3/
/** * dom ready handler * @type {{ready: function, load: function, unload: function}} */ var dom = { ready: function (fn) { (document.readystate !== 'loading') ? fn() : document.addeventlistener('domcontentloaded', fn); }, load: function (fn) { (document.readystate === 'complete') ? fn() : window.addeventlistener('load', fn); }, unload: function (fn) { window.addeventlistener('beforeunload', fn); } }; /** * stratus layer prototype * @type {{models: {}, collections: {}, views: {}, routers: {}}} */ var stratus = { models: {}, collections: {}, views: {}, routers: {}, events: {} }; /** * stratus core events * * when these events triggered, functions attached event name * execute in order of initial creation. becomes supremely useful * when adding initialization , exit routines below script(s) * progressively add models, functions, et cetera. */ _.extend(stratus.events, backbone.events); // init event stratus.events.on('init', function () { console.log('stratus layer initialization!'); }); // exit event stratus.events.on('exit', function () { console.log('stratus layer exit!'); }); /** * stratus dom ready events * * when these events triggered, arguments pass inherent * functions, should allow internal functions overwritten if * need be. scope of these events intends provide solid reusable * methods require triggering. */ dom.ready(function () { // trigger init event stratus.events.trigger('init'); var forms = new stratus.collections.forms(); new stratus.views.form({ collection: forms }); }); /** * form model */ stratus.models.form = backbone.model.extend({ url: '/echo/json', validate: function (fields) { var result = validator.validateall(fields); if (result !== true) return result; } }); /** * form collection */ stratus.collections.forms = backbone.collection.extend({ model: stratus.models.form, url: '/echo/json' }); /** * form view */ stratus.views.form = backbone.view.extend({ tagname:'form', el: '#formasync', events: { 'submit form': 'catchsubmit' }, initialize: function() { console.log('form initialized'); }, catchsubmit: function(e) { console.log("caught submission!"); e.preventdefault(); } });
thanks comments above, able working changing last portion of code below reflect submit event view object, rather submit event form tag within view object.
/** * form view */ stratus.views.form = backbone.view.extend({ tagname:'form', el: '#formasync', events: { 'submit': 'catchsubmit' }, initialize: function() { console.log('form initialized'); }, catchsubmit: function(e) { console.log("caught submission!"); e.preventdefault(); } });
Comments
Post a Comment