Man, when did forms get so complex? Oh, right, always.<\/p>\n
Backbone.js is great because it lets me structure my app how I see best and gives me the tools to do so efficiently. Well, most of the tools. It’s not very good at dealing with handling multiple forms submitting over AJAX and orchestrating those submissions under a parent view. Nor should it be. However, I needed that functionality so I wrote some code.<\/p>\n
Abide is an extension of a Backbone.View that has hooks for checking model validation, dealing with multiple jQuery.Deferred promises (be they AJAX or not) and orchestrating the whole submission process in one place. <\/p>\n
Just have your view extend Abide instead of Backbone.View…<\/p>\n
\r\nvar parentView,\r\n firstChild,\r\n secondChild,\r\n redhadedStepChild;\r\n\r\n\/\/Create up your parent view and extend Abide instead of Backbone.View\r\nparentView = Backbone.Abide.extend({\r\n promises: function() {\r\n \/\/ Gather child view save promises\r\n }\r\n}\r\n});\r\n\r\n\/\/Create child views as well. These can be regular views or more Abide parents.\r\nfirstChild = Backbone.View.extend({ \/* ... *\/ });\r\nsecondChild = Backbone.View.extend({ \/* ... *\/ });\r\nredhadedStepChild = Backbone.View.extend({ \/* ... *\/ });\r\n\r\n\/\/Then instantiate the parent, passing in which views it should parent\r\nnew parentView({ views: [firstChild, secondChild, redhadedStepChild] });\r\n<\/pre>\n…and override the promises method to return your view’s promises…<\/p>\n
\r\nvar sweetAbideView = Backbone.Abide.extend({\r\n promises: function() {\r\n var promises = [],\r\n self = this;\r\n\r\n _.each(self.views, function(view) {\r\n promises.push(view.model.save());\r\n });\r\n\r\n return promises;\r\n }\r\n});\r\n<\/pre>\n…and you’re good to go!<\/p>\n