2
Я не понимаю, что здесь происходит. Я думаю, это потому, что я загружаю форму позже в представлении, но я честно не уверен. Вот мой взгляд.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 s все заполняются полями, использующими расширение базовой линии.
<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;
});
Вы видите, что вы отправляете событие отправки на своей странице, когда отправляете эту форму? Попробуйте зарегистрировать обработчик, используя jQuery в родительском элементе #form для любых отправлений, в соответствии с: http://stackoverflow.com/a/9331127/323005 – damienc88
@ damienc88 Итак, я добавил '$ ('body'). On (' submit ',' #form ', function() { alert ("submit firing"); }); 'underneath' $ ("# form"). html (form.el); 'и не регистрирует submit события вообще. –
@muistooshort Я добавил свою индексную страницу и шаблон формы, чтобы вы могли понять, как это выглядит. –