Rails 4 Backbone 的事件顺序需要加载

Question

我有三个主要文件：

A) application.js  // This resides in rails land at    app/assets/javascripts/application.js
B) SOF.js          // This resides in rails land at    app/assets/javascripts/SOF.js
C) router.js       // This resides in backbone land at app/assets/javascripts/backbone/routers/router.js

我想知道为什么在 router.js 中声明的依赖项没有在路由器本身中调用。换句话说，事件的顺序是：

A 在正常 require.js define()
然后B的
然后是C的
那么所有 C 的依赖项都只是在函数 init 中定义的！！！！
然后A开始初始化，调用B.initialize()
然后B在调用C.initialize()
(a)然后 C 开始初始化，(b)识别路由，并遵循适当的路由器方法，完成其路由器方法调用（即使没有任何）。
然后 C 完成初始化，并将控制权交还给 B
然后 B 完成初始化，并将控制权交还给 A
然后A完成初始化，没有更多的日志....

我的理解是 App.js(A) 应该初始化 SOF.js(B)，后者在 router.js(C) 中初始化路由器，然后路由器应该识别路线，并遵循适当的路线，并在那里创建任何 models/collections/views。

为什么仅通过将文件包含在 require.js 方法声明的 define() 部分中，它会导致它们加载，甚至在文件本身初始化之前？如果我删除声明，它们将不会加载，但当然，我无法引用它们以在适当的路径中手动启动它们....

你的眼睛文件（左边是以上事件顺序）：
Application.js:

1-  console.log('Application.js: Started');
    require([      'SOF'    ],
      function(SOF){
5-    console.log("Application.js: initializing SOF...");
      SOF.initialize(App.songs); //App.songs is an object that contains the data from the Rails DB
10-   console.log("Application.js: SOF_Application Fully initialized");
    });

SOF.js:

2- console.log('SOF.js: Started');
   define([
     'jquery',
     'underscore',
     'backbone',
     'backbone/routers/router',
     'd3',
     'jquery-ui'
   ], function($, _, Backbone, Router, d3, $){
     var initialize = function(options){
6-     console.log('SOF.js: In Initialize, initializing Router:');
6-     console.log('SOF.js: options : ', options);
       Router.initialize(options);
9-     console.log('SOF.js: Finished initializing');
     }
     return {
       initialize: initialize
     };
   });

router.js:

3- console.log('Backbone Router started');
   define([
     'jquery',
     'underscore',
     'backbone',
4-   'backbone/relevantModels....',       // Will init just by being here
4-   'backbone/relevantCollections....',  // If I remove it from here, and of course its matching name in the following function formal parameter, it will not init/render
4-   'backbone/relevantViews....'
   ], function($, _, Backbone, RelevantModels, RelevantCollections, RelevantViews){
     var BBRouter = Backbone.Router.extend({
       routes: {
         'new'       : 'newSong',
         '.*'        : 'newSong'
       },
       newSong: function(){
7b       console.log('BB routes => new : newSong');
         // THESE ARE ALL COMMENTED OUT (VERIFIED no caching problems) but still init/render because they are declared above
         // And if I remove the declaration above, I can't call new RelevantView() since it won't know what RelevantView is
         // top side
         // RelevantView.render();
         // middle
         // RelevantView.render();
         // bottom
         // RelevantView.render();
7b       console.log('BB routes: newSong Finished');
       }
     });
     var initialize = function(options){
7a     console.log("BB Router => Initializing...");
       var bb_router = new BBRouter;
       window.router = bb_router;  // attach it to the window for debugging
8-     console.log('BB Router => Initialized');
       Backbone.history.start({root: '/songs/#new'});
     };
     return {
       initialize: initialize
     };
   });

另请注意，在Rails主Application.html.erb上，这是<head>中声明的顺序：

<%= stylesheet_link_tag    "application", :media => "all" %>
<%= requirejs_include_tag "application" %>
<%= javascript_include_tag "assets" %>

宝石文件：

gem 'rails-backbone', git: 'https://github.com/codebrew/backbone-rails.git', tag: 'v1.1.2'
gem 'requirejs-rails', git: 'git://github.com/jwhitley/requirejs-rails.git'

和Gemfile.lock

GIT
  remote: https://github.com/codebrew/backbone-rails.git
  revision: 4c1dfba7b4f2a989bd0dbc95d5afd3fc762a0b6d
  tag: v1.1.2
  specs:
    rails-backbone (1.1.2)
      coffee-script
      ejs
      jquery-rails
      railties
GIT
  remote: git://github.com/jwhitley/requirejs-rails.git
  revision: f2330104aeca4d193fd5680a22ae7eee85d814b5
  specs:
    requirejs-rails (0.9.1)
      railties (>= 3.1.1, < 4.1)

Answer 1

你对模块初始化顺序的理解是正确的，但是查看查看模块文件的结尾（例如下面的StageView）：

define([
  ...
], function(...) {
  var StageView = Backbone.View.extend({
    ...
  });

  // A singleton
  return new StageView();
});

除了仅仅定义一个视图class，它还直接创建它的一个实例。这解释了为什么在导入模块时调用视图的 initialize()（Backbone 从构造函数调用 initialize()）。它也是调用 render() 的 initialize() 方法（例如，参见 stageView.js, line 45）。

希望这能解开谜团。 :-)

Rails 4 Backbone 的事件顺序需要加载

Order of events for a Rails 4 Backbone Require loading

javascript

ruby-on-rails

requirejs

backbone.js

ruby-on-rails-4