Backbone.js / jQuery表单提交

Question

I seem to be having an issue with this little snippet. I've fiddled with it for quite some time and it never truly seems to catch a Form Submission, no matter how I set my View Object. As I've come to understand Backbone, the View model is supposed to tie to the DOM through jQuery (although not always necessary), which is why I planned on catching the submit in this fashion to ensure simple serialization and ajax posting. Although, every time I submit I never actually see "Caught Submission!" in the Console Log.

Any help with this issue is greatly 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 are triggered, all functions attached to the event name
 * will execute in order of initial creation.  This becomes supremely useful
 * when adding to the Initialization and Exit Routines below as the 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 are triggered, all arguments will pass to their inherent
 * functions, which should allow the internal functions to be overwritten if
 * need be.  The scope of these events intends to provide solid reusable
 * methods that only 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();
    }
});

Answer 1

Thanks to the comments above, I was able to get this working simply by changing the last portion of the code below to reflect the submit event for the View Object, rather than a submit event for a form tag within the 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();
    }
});