Событие отправки Backbone.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;
});

Я попытался привязать событие только к сгенерированной форме, и, как вы можете видеть выше, я попытался просто перехватить любое событие отправки. Любая помощь в этом очень ценится.

EDIT: вот как выглядит моя индексная страница

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

javascript jquery backbone.js backbone-events backbone-forms
person Willem Ellis    schedule 22.05.2013    source источник
comment
Вы видите, что событие отправки вообще срабатывает на вашей странице, когда вы отправляете эту форму? Попробуйте зарегистрировать обработчик с помощью jQuery в родительском элементе вашей формы # для любых отправок, как показано ниже: stackoverflow.com/a/9331127/323005< /а>   -  person damienc88    schedule 22.05.2013
comment
@ damienc88 Итак, я добавил $('body').on('submit', '#form', function() { alert( "submit firing" ); }); под $("#form").html(form.el);, и он вообще не регистрирует событие отправки.   -  person Willem Ellis    schedule 22.05.2013
comment
@muistooshort Я добавил свою индексную страницу и шаблон формы, чтобы вы могли получить представление о том, как это выглядит.   -  person Willem Ellis    schedule 22.05.2013
comment
Попробуйте еще раз, используя «form», а не «#form», вы указываете тег элемента, а не селектор. Вы можете указать это, как хотите, даже из консоли браузера или document.load, если ваше тело существует в этот момент.   -  person damienc88    schedule 22.05.2013
comment
@ damienc88 damienc88 Я попробовал «форму», и до сих пор нет никаких признаков отправки.   -  person Willem Ellis    schedule 22.05.2013
comment
Где #form? $("#form").html(form.el); вообще что-нибудь делает? #form внутри .body?   -  person mu is too short    schedule 22.05.2013
comment
@muistooshort, который действительно загружает форму в div #form, который является дочерним элементом .body.   -  person Willem Ellis    schedule 22.05.2013
comment
Я бы рекомендовал упростить ваш код: убрать все, кроме минимальной структуры. Сейчас слишком много шума, чтобы обнаружить проблему.   -  person mu is too short    schedule 22.05.2013
comment
Не могли бы вы опубликовать свои формы/NewServiceForm? Кстати, вы должны разделить свои функции на более мелкие подмодули.   -  person Rifat    schedule 22.05.2013
comment
@Rifat Я разместил NewServiceForm. Как бы вы предложили разделить его?   -  person Willem Ellis    schedule 22.05.2013
comment
@muistooshort Я упростил код до минимума. Как вы заметили, у меня есть событие click, запускающее отрисовку формы. Может ли это иметь какое-либо отношение к тому, что событие отправки не распознается?   -  person Willem Ellis    schedule 22.05.2013
comment
Итак, я загрузил форму непосредственно в функцию рендеринга, и она распознает событие отправки. Так что что-то в его генерации после события клика все портит. Как-нибудь обойти это?   -  person Willem Ellis    schedule 22.05.2013

Ответы (1)


arrow_upward
0
arrow_downward

ВАУ!! Наконец-то понял это! Я пошел дальше и перенес рендеринг формы в функцию рендеринга представления. Теперь рендер выглядит так:

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

Все остальное остается прежним. И теперь это работает!

person Willem Ellis    schedule 22.05.2013