Require.js模块没有看到骨干Router.js

Question

在这个简单的要求/骨干网应用

https://github.com/thisishardcoded/require-prob

为什么app.js看到路由器，但TestView.js不是？

这里是app.js

define(['router'],function (Router) { 

第一线，这里是TestView.js

define(['backbone','router'],function(Backbone,Router){ 

检查出完整的详细信息，下载回购的第一线，运行和检查控制台日志如果你觉得如此倾向

谢谢！ Jim

更多：好的，答案是 - 因为它的加载顺序，即使改变了，我有一个循环依赖不是吗？ TestView需要路由器，路由器需要TestView。

在这种情况下，解决方案可能是

var r=require('router); 
r.navigate or whatever 

但是，这似乎是一个耻辱，路由器是不能直接访问无处不在，是上述方法中好的做法呢？

Answer 1

当然这是因为循环依赖的。要解决它，你要么传递路由器来查看构造函数，并从视图的模块中删除路由器依赖项，或者在你的视图中使用require（'router'）。

第一种选择，router.js：

app_router.on('route:test', function() { 
    var testView = new TestView({router: app_router}); 
    testView.render(); 
}) 

第一种选择，view.js：

define(['backbone'], function(Backbone){ 

    var TestView=Backbone.View.extend({ 
     el: '#test', 
     initialize: function() { 
      // get router from constructior options 
      this.router = this.options.router 
     }, 
     render: function(){ 
      this.$el.html('<p>Foo!</p>'); 
      console.log("TestView.js does not find 'Router',", this.router); 
     } 
    }); 

    return TestView; 

}); 

第二个选项，view.js：

define(['backbone','router'], function(Backbone, router){ 

    // at this point router module is not loaded yet so router is undefined 

    var TestView=Backbone.View.extend({ 
     el: '#test', 
     initialize: function() { 
      // at this point router module is loaded and you may access it with require call 
      this.router = require('router'); 
     }, 
     render: function(){ 
      this.$el.html('<p>Foo!</p>'); 
      console.log("TestView.js does not find 'Router',", this.router); 
     } 
    }); 

    return TestView; 

}); 

第二个选项也这里描述：http://requirejs.org/docs/api.html#circular

Answer 2

您应该在包含RequireJS config的main.js文件中定义baseUrl属性。 通过这种方式，应用程序中模块的所有路径都将相对于该baseUrl。

请参见：

http://requirejs.org/docs/api.html#jsfiles
http://requirejs.org/docs/api.html#config-baseUrl

Answer 3

我下载并检查了您的代码。以下可能是问题：

1. require.js只适用于AMDs。由于主干不再支持AMD。您将需要使用启用Backbone的AMD版本。你可以得到它here

2. TestView是你的路由器的依赖。所以它在路由器加载之前加载。

您可能想要改进编码模式。这里是我的建议：

App.js

define([ 

'骨干'， '路由器'， ]功能（骨干，MainRouter）{ '使用严格的';

var AppView = Backbone.View.extend({ 

    initialize: function(){ 

     App.router = new MainRouter(); 
     Backbone.history.start(); 
    } 
}); 

return AppView; 
}); 

Router.js

define([ 
    'backbone', 
    'view/TestView' 
], function(Backbone, TestView){ 
    var Main = Backbone.Router.extend({ 
     routes: { 
      'test': 'test' 
     }, 

     test: function(){ 
      new TestView({ 
       // pass model or collection to the view 
       // model: new TestModel // remember to require 
      }); 
     } 

    }); 

    return Main; 
}); 

编辑 监听事件：

// in main.js 
var window.Vent = {}; 

_.extend(window.Vent, Backbone.Events); 

// now in any view you can trigger a event 
$('something').on('click', function(){ 
    window.Vent.trigger('somethinghappened', this); 
    // this is reference to current object 
}); 

// now in other view you can do 
window.Vent.on('somethinghappened', this.run, this); 
// this in the end is the reference we passed when event was triggered 

run: function(obj){ 
    //this function will run when the event is triggered 
    // obj is the object who triggered the event 
} 

PS：你为什么要在视图中使用的路由器？我已经构建了很多骨干应用程序。从来没有需要这样做。

Answer 4

您可以使用可用的Backbone.history.navigate来实现您的目标更容易，因为Router.navigate是一个简单的包装。考虑这个part of Backbone source：

navigate: function(fragment, options) { 
    Backbone.history.navigate(fragment, options); 
    return this; 
},