我有一个正常工作的 Backbone 应用程序，但是，当我尝试在命名空间下重新组织代码时，我无法让它做任何事情。对于我知道正在初始化的视图（通过控制台日志消息），我什至无法触发事件（通过单击 id），所以我想知道我是否以某种方式引入了一些基本缺陷。我正在遵循这个博客（法语）http://www.atinux.fr/2011/12/10/organiser-son-code-backbone-js-en-modules/
在主 application.js（见下文）中，我在文档准备好启动应用程序后实例化所有视图和模型。由于创建此命名空间而引入的一项更改是为视图设置模型this.models.game
this.views.clock_view = new this.Views.clockView({ model: this.models.game});
在模块文件夹中，我有一个views.js 和一个models.js。app.Views or app.Models我像这样创建了每个视图和对象，并以相应的开头
app.Views.announceView = Backbone.View.extend({
....
app.Views.optionsView = Backbone.View.extend({
...
这个 app.Views.optionsView 正在初始化（根据初始化程序中的 console.log 语句）但是当我点击 #new_game 时，startNewGame 中的 console.log 没有被触发
'click #new_game': 'startNewGame'
// 'click .action_button': 'startNewGame'
},
startNewGame: function() {
console.log("startNewGame");
this.model.new();
},
由于命名空间，我所做的另一个关键更改是在其他视图之一中创建新视图时。在上一个（非命名空间应用程序）下，我从 QuestionListView 创建了单个问题项
var view = new QuestionListItemView({ model: game });
但现在我在做
var view = new app.Views.questionListItemView({ model: app.models.game })
因为模型的实例保存this.models.game在 application.js 中，但是，我也尝试使用 'this.models.game'
var view = new app.Views.questionListItemView({ model: this.models.game })
不管怎样，在涉及游戏模型之前，我无法触发上面列出的 startNewGame 函数，所以这不仅仅是如何识别模型的问题。
我还想知道在从内部创建新视图时是否应该在“新”之后使用 this.Views 或 app.Views
var view = new app.Views.questionListItemView({ model: this.models.game })
如果您能帮助我找出我引入的任何缺陷，我将不胜感激。
应用程序.js
var app = {
// Classes
Collections: {},
Models: {},
Views: {},
// Instances
collections: {},
models: {},
views: {},
init: function () {
this.models.game = new this.Models.game();
this.views.story_view = new this.Views.storyView(); #doesn't have a model
this.views.clock_view = new this.Views.clockView({ model: this.models.game});
this.views.field_view = new this.Views.fieldView({ model: this.models.game});
this.views.options_view = new this.Views.optionsView({ model : this.models.game});
this.views.announcement_view = new this.Views.announceView({ model: this.models.game});
this.views.question_list_view = new this.Views.questionListView({ model : this.models.game});
this.views.question_list_item_view = new this.Views.questionListItemView({ model : this.models.game});
}
};
$(document).ready(function () {
app.init();
}) ;
选项视图正在初始化，但是当我单击该 #id 时无法触发 startNewGame 函数
app.Views.optionsView = Backbone.View.extend({
// el: $("#options"),
el: $("#options"),
initialize: function() {
console.log("app views OptionsView initialized");
// this.model.bind("gameStartedEvent", this.removeGetAnswerButton, this);
this.model.bind("gameStartedEvent", this.disableNewGame, this);
},
events: {
'click #demo': 'startDemo',
'click #new_game': 'startNewGame'
// 'click .action_button': 'startNewGame'
},
startDemo: function(){
console.log("start demo");
this.model.demo();
},
startNewGame: function() {
console.log("startNewGame");
this.model.new();
},
disableNewGame: function(){
$('#new_game').attr("disabled", true);
}
});
更新我的文件结构如下所示
<%= javascript_include_tag 'application.js'%>
<%= javascript_include_tag 'modules/models'%>
<%= javascript_include_tag 'modules/views'%>
在视图和模型文件的顶部，我只是做这样的事情
app.Views.optionsView = Backbone.View.extend({
即..没有准备好进一步的文件。事实上，在这些文件中包含另一个准备好的文档会破坏 application.js init