js提交事件未触发

我不知道这里发生了什么。我想这是因为我稍后会在视图中加载表单，但我也不确定。以下是我的观点。

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;
});

哇!!终于想通了!我继续将表单的呈现移动到视图的呈现函数中。所以现在渲染看起来像这样:

        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);
        }

其他都保持不变。现在它成功了!

相关内容

最新更新

热门标签：