Backbone.js提交事件未觸發
[英]Backbone.js submit event not firing
問題描述
我對這里發生的事情一無所知。 我認為這是因為稍后我將在視圖中加載表單，但是老實說我不確定。 這是我的看法。
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;
});
我嘗試將事件綁定到僅生成的表單，並且如您在上面所看到的，我嘗試捕獲任何Submit事件。 在此方面的任何幫助將不勝感激。
編輯：這是我的索引頁的樣子
<!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都使用主干形式擴展名填充字段。
<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;
});
1 個解決方案
解決方案1
0 已采納 2013-05-22 18:31:20
哇！ 終於想通了！ 我繼續將表單的呈現移至視圖的呈現功能。 所以現在渲染看起來像這樣：
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“更改時”事件無法正確觸發
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.