Question

我有一个正常运行的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});

在modules文件夹中，我有一个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 })

因为模型的实例已保存到application.js中的this.models.game，但是，我也尝试使用'this.models.game'

   var view = new app.Views.questionListItemView({ model: this.models.game })

无论哪种方式，在参与游戏模型之前，我都无法触发上面概述的startNewGame功能，所以这不仅仅是如何识别模型的问题。

我还想知道我是否应该使用this.Views或app.Views在'new'之后从

创建新视图

  var view = new app.Views.questionListItemView({ model: this.models.game })

如果你能帮助我找出我引入的任何缺陷，我将不胜感激。

的application.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({

ie ..没有准备好进一步的文件。事实上，包括在这些文件中准备好的另一个文档会破坏application.js init

Answer 1

在使用命名空间之前，我在视图中以这种方式定义了元素

el: $("#options")

正如在这个问题的评论中所指出的那样，并不是理想的做法（参见下面的@muistooshort评论），（尽管它有效）。

以这种方式定义el

 el: '#options'

让它工作，并让Backbone“自己将其转换为节点对象”。

命名空间后无法使应用程序正常工作

1 个答案: