我创建了一个简单的Backbone应用程序，可以动态创建标签 - 松散地基于 Chris Sterritt的博客文章。但是，我无法通过第二个标签。由于某种原因，我的事件处理程序（它与第二个选项卡上的“提交”按钮绑定）永远不会触发。
为大型代码段提供道歉。这是我能做到的简短。努力进入jsfiddle ......
<!DOCTYPE html>
<html lang="en" xmlns="">
<head>
<meta charset="utf-8">
<title>Dynamic jQuery UI Tabs with Backbone</title>
<!-- Stylesheets -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/start/jquery-ui.css"
media="screen" rel="stylesheet" type="text/css"/>
<link href="stylesheets/zurb_foundation.css" media="screen" rel="stylesheet" type="text/css"/>
<script id=Template1 type="text/template">
<h4>Tab 1</h4>
<h2> Tab 1 content here...</h2>
<button id="submitTab1">Submit</button>
</script>
<script id=Template2 type="text/template">
<h4>Tab 2</h4>
<h2> Tab 2 content here...</h2>
<button id="submitTab2">Submit</button>
</script>
<script id=Template3 type="text/template">
<h4>Tab 3</h4>
<h2> Tab 3 content here...</h2>
<button id="submitTab3">Submit</button>
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js" type="text/javascript"></script>
<script src="javascript/application.js" type="text/javascript"></script>
<script src="javascript/app.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="eight columns">
<div id="tab_wrapper">
<ul id="tab_ul"></ul>
</div>
</div>
</div>
</div>
</body>
</html>
的application.js：
$(document).ready(function () {
"use strict";
// Build our TabEx objects
buildTabExUI();
app.js：
/*
Contains the Backbone.js application logic.
*/
(function ($) {
"use strict";
// The TabExTab object
window.TabExTab = Backbone.Model.extend({
initialize: function () {
},
defaults: {
name: "Name",
contents: "Contents of Name"
}
});
//------------------------------------------------------------
window.ShowTab1 = Backbone.Model.extend({
initialize: function () {
},
});
window.ShowTab1View = Backbone.View.extend({
template: _.template($('#Template1').html()),
//template: _.template($('#Template1')),
render: function () {
this.$el.html(this.template);
this.delegateEvents();
return this;
},
events: {
'click #submitTab1': 'submitTab1',
},
// Bind events to the button clicks for the different templates...
submitTab1: function(event){
console.log("SubmitTab1 was clicked");
event.preventDefault();
$(location).attr('href','#showTab2');
}
});
//------------------------------------------------------------
window.ShowTab2 = Backbone.Model.extend({
initialize: function () {
}
});
window.ShowTab2View = Backbone.View.extend({
template: _.template($('#Template2').html()),
render: function () {
this.$el.html(this.template);
this.delegateEvents();
return this;
},
events: {
'click #submitTab2': 'submitTab2'
},
submitTab2: function(event){
console.log("SubmitTab2 was clicked");
$(location).attr('href','#showTab2');
event.preventDefault();
}
});
//------------------------------------------------------------
window.ShowTab3 = Backbone.Model.extend({
initialize: function () {
}
});
window.ShowTab3View = Backbone.View.extend({
template: _.template($('#Template3').html()),
render: function () {
this.$el.html(this.template);
this.delegateEvents();
return this;
},
events: {
'click #submitTab3': 'submitTab3'
},
// Bind events to the button clicks for the different templates...
submitTab3: function(event){
console.log("SubmitTab3 was clicked");
$(location).attr('href','#showTab4');
event.preventDefault();
}
});
window.buildTabExUI = function () {
// --------------------------------------------------------------------------
// The view for a single TabExBlock object
window.TabExTabView = Backbone.View.extend({
initialize: function () {
_.bindAll(this, 'render');
this.model.bind('change', this.render);
},
render: function () {
// add the actual content
$("#tab_wrapper").append('<div id="tab_' + this.model.cid + '">');
console.log("Model contents: " + this.model.get('contents'));
// ask jQueryUI to add the tab to the bar
$("#tab_wrapper").tabs("add", "#tab_" + this.model.cid, this.model.get('name'));
return this;
}
});
// --------------------------------------------------------------------------
// The router
window.TabExRouter = Backbone.Router.extend({
routes: {
'': 'home',
'showTab2': 'showTab2',
'showTab3': 'showTab3'
},
initialize: function () {
this.inner = new window.ShowTab1View({model: window.ShowTab1});
},
home: function () {
$('#tab_ul').empty();
$('#tab_wrapper').empty();
$('#tab_wrapper').append('<ul id="tab_ul"></ul>');
// Set up the tab holder
$("#tab_wrapper").tabs();
// Create the first tab as the anchor for subsequent tabs
var nt = new window.TabExTab({name: "Tab1 ", contents: "Show Tab 1"});
var btv = new window.TabExTabView({model: nt});
btv.render();
console.log("Tab CID: " + "tab_" + btv.model.cid);
// This code creates the tab cid ( e.g. #tab_c2 ) using the reference values
$("#tab_" + btv.model.cid).append(this.inner.template);
console.log("EL: " + btv.$el.append(this.inner.$el));
btv.$el.append(this.inner.$el);
this.inner.render();
},
showTab2: function () {
this.inner = new window.ShowTab2View({model: window.ShowTab2});
var nt = new window.TabExTab({name: "Tab2 ", contents: "Show Tab 2"});
var btv = new window.TabExTabView({model: nt});
btv.render();
var tabCID = "tab_" + btv.model.cid;
console.log("Tab CID: " + tabCID);
// This code creates the tab cid ( e.g. #tab_c2 ) using the reference values
$("#tab_" + btv.model.cid).append(this.inner.template);
btv.$el.append(this.inner.$el);
this.inner.render();
// Select the new tab
$("#tab_wrapper").tabs("select", "#" + tabCID);
},
showTab3: function () {
this.inner = new window.ShowTab3View({model: window.ShowTab3});
var nt = new window.TabExTab({name: "Tab3 ", contents: "Show Tab 3"});
var btv = new window.TabExTabView({model: nt});
btv.render();
var tabCID = "tab_" + btv.model.cid;
console.log("Tab CID: " + tabCID);
// This code creates the tab cid ( e.g. #tab_c2 ) using the reference values
$("#tab_" + btv.model.cid).append(this.inner.template);
btv.$el.append(this.inner.$el);
this.inner.render();
// Select the new tab
console.log("Tab ID: ", "#tab_wrapper").tabs("select", "#" + tabCID);
$("#tab_wrapper").tabs("select", "#" + tabCID);
}
});
// --------------------------------------------------------------------------
// Kick off the application
window.App = new TabExRouter();
Backbone.history.start();
}
}）（jQuery的）;
我在几个不同的浏览器以及WebStorm的调试器中尝试过这个代码并且很难过！
更新：我重构了我的代码，其中事件被移动到View块中。现在即使是第一个事件也不会发生。我正在学习Backbone，我真的很想念这里。