Question

我不知道这里发生了什么。我认为这是因为我稍后在视图中加载了表单，但我老实说不确定。这是我的观点。

define([
    'jquery',
    'underscore',
    'backbone',
    'serializeForm',
    'backboneForms',
    'text!templates/services/ServicesTemplate.html',
    'models/ServiceModel',
    'forms/NewServiceForm',
    'text!templates/forms/ServiceFormTemplate.html',
    'collections/RegionsCollection',
    'collections/UsersCollection'
], function($, _, Backbone, serializeForm, backboneForms, ServicesTemplate, ServiceModel, 
            NewServiceForm, ServiceFormTemplate, RegionsCollection, UsersCollection){

    // The form
    var form;

    // What's gonna be clicked
    var clicked;

    // Get the user's credentials
    if($.cookie('UserInfo'))
        var userCreds = JSON.parse($.cookie('UserInfo'));

    var ServicesView = Backbone.View.extend({
        el: '.body',
        render: function() {
            // Load everything
            var servicesTemplate = _.template(ServicesTemplate);
            this.$el.html(servicesTemplate);
        },
        events: {
            'click .btn': 'loadForm',
            'submit': 'addService'
        },
        loadForm: function(ev) {
            // Save what was clicked
            clicked = $(ev.target).html();

            // Save the scope
            var that = this;

            // Create the regions collection
            var regionsCollection = new RegionsCollection();

            var serviceModel = new ServiceModel();

            var serviceFormTemplate = _.template(ServiceFormTemplate);

            // Create the form
            form = new NewServiceForm({
                template: serviceFormTemplate,
                model: serviceModel
            }).render();

            $("#form").html(form.el);

            $('.body').on('submit', 'form', function() {
                alert( "submit firing" );
            });
        },
        addService: function(ev) {
            var errors = form.commit();

            if(!errors) {
                var newService = $(ev.currentTarget).serializeForm();
                newService.cluster = clicked;
                console.log(newService);
            } else {
                $.each(errors, function(key, value) {
                    $("[name='" + key + "']").closest(".control-group").addClass("error");
                    $("[name='" + key + "']").closest(".control-group").find(".text-error").html("<small class='control-group error'>" + value.message + "</small>");
                });
            }
            return false;
        }
    });
    return ServicesView;
});

我试图将事件绑定到生成的表单，正如您在上面所看到的，我尝试捕获任何提交事件。非常感谢任何帮助。

编辑：以下是我的索引页面的内容

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>Backbone Auth</title>
        <?php include('includes/head_includes.php'); ?>
    </head>
    <body>
        <div class="header"></div>

        <div class="container body">
        </div>
        <?php include('includes/js_files.php'); ?>
    </body>
</html>

这大致是我的表格。所有.control-group都使用backbone-forms扩展名来填充字段。

<form id="addservice" accept-charset="UTF-8">
    <div id="error" class="alert alert-error" style="display:none;"></div>
    <fieldset>
        <div class="control-group">
            <div class="controls">
                <label>Region</label>
                <div class="text-error"></div>
                <div data-editors="region"></div>
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                <label>Stage</label>
                <div class="text-error"></div>
                <div data-editors="stage"></div>
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                <label>Description</label>
                <div class="text-error"></div>
                <div data-editors="description"></div>
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                <label>Primary Contact</label>
                <div class="text-error"></div>
                <div data-editors="contact"></div>
            </div>
        </div>

        <input id="AddService" class="btn btn-primary" type="submit" name="submit" value="Add Service" />
    </fieldset>
</form>

EDIT2：这是我的NewServiceForm

define([
    'jquery',
    'underscore',
    'backbone',
    'backboneForms'
], function($, _, Backbone, backboneForms){
    var NewServiceForm = Backbone.Form.extend({
        schema: {
            region: { 
                type: 'Select',
                title: 'Disaster Region',
                options: [],
                validators: [
                    'required'
                ]
            },
            stage: { 
                type: 'Select',
                title: 'Stage',
                options: [
                    {val: "", label: "Select One"},
                    {val: "Assessment", label: "Assessment"},
                    {val: "Planned", label: "Planned"},
                    {val: "Commenced", label: "Commenced"}
                ],
                validators: [
                    'required'
                ]
            },
            description: {
                type: 'TextArea',
                title: 'Description',
                editorAttrs: {
                    maxlength: 140
                },
                validators: [
                    'required'
                ]
            },
            contact: { 
                type: 'Select',
                title: 'Primary Contact',
                options: [],
                validators: [
                    'required'
                ]
            }
        }
    });

    return NewServiceForm;
});

Answer 1

WOOP !!终于搞清楚了！我继续前进并将表单的渲染移动到视图的渲染功能中。所以现在渲染看起来像这样：

        render: function() {

            var serviceModel = new ServiceModel();

            var serviceFormTemplate = _.template(ServiceFormTemplate);

            // Create the form
            form = new NewServiceForm({
                template: serviceFormTemplate,
                model: serviceModel
            }).render();

            // Load everything
            var servicesTemplate = _.template(ServicesTemplate);
            this.$el.html(servicesTemplate);
        }

其他一切都保持不变。现在它有效！

Backbone.js提交事件未触发

1 个答案: