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; 
},