0

我有一个正常工作的 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

4

1 回答 1

0

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

el: $("#options")

正如对该问题的评论所指出的那样，这不是理想的方法（请参阅下面的@muistooshort 评论），（即使它有效）。

以这种方式定义 el

 el: '#options'

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

于 2013-02-12T05:08:04.167 回答