Backbone.js / jQuery 表单提交

Question

我似乎对这个小片段有疑问。我已经摆弄它很长一段时间了，无论我如何设置我的视图对象，它似乎从未真正捕捉到表单提交。据我了解 Backbone，View 模型应该通过 jQuery 绑定到 DOM（尽管并不总是必要的），这就是我计划捕获提交的原因这种方式确保简单的序列化和 ajax 发布。虽然，每次我提交时，我实际上从未在控制台日志中看到 "Caught Submission!"。

非常感谢任何对此问题的帮助。

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

多亏了上面的评论，我能够通过更改下面代码的最后一部分来反映视图对象的 submit 事件，而不是视图对象中 form 标签的 submit 事件。

/**
 * 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();
    }
});

Backbone.js / jQuery 表单提交

Backbone.js / jQuery Form Submission

javascript

ajax

jquery

backbone.js

underscore.js