使用Backbone.js路由器瀏覽通過require.js模塊化的視圖

Question

我將我的視圖和路由器分隔成需要的單獨文件。然後我有一個main.js文件實例化路由器，並呈現我的默認視圖。

我的路由器將視圖（'查看/：id'）和編輯（'編輯/：id'）作爲路由。在main.js中，當我實例化路由器時，我可以硬編碼router.navigate（'View/1'，true）並且導航工作正常。在我的視圖文件中，當我點擊編輯鏈接時，我想調用router.navigate（'View /'+ id，true），但我不知道該怎麼做。

我已經成功調用Backbone.history.navigate（'View /'+ id，true），但我不覺得我應該依賴全局Backbone對象。

我嘗試通過（{路由器：appRouter}）到我的意見，所以我可以使用this.options.router.navigate（），但是這不適合我。

如果你很好奇，這裏是從我的應用程序一串代碼：

路由器：

define(['./View', './Edit'], function (View, Edit) { 
    return Backbone.Router.extend({ 
     routes: { 
      'View/:id': 'view', 
      'Edit/:id': 'edit' 
     }, 

     view: function (id) { 
      var model = this.collection.get(id); 
      var view = new View({ model: model }); 
      view.render(); 
     }, 

     edit: function (id) { 
      var model = this.collection.get(id); 
      var edit = new Edit({ model: model }); 
      edit.render(); 
     } 
    }); 
}); 

查看：

define(function() { 
    return Backbone.View.extend({ 
     template: Handlebars.compile($('#template').html()), 

     events: { 
      'click .edit': 'edit' 
     }, 

     render: function() { 
      //Create and insert the cover letter view 
      $(this.el).html(this.template(this.model.toJSON())); 
      $('#View').html(this.el); 

      return this; 
     }, 

     edit: function() { 
      Backbone.history.navigate('Edit/' + this.model.id, true); 
     }, 
    }); 
}); 

Answer 1

與幾乎任何骨幹問題一樣，有很多方法可以解決這個問題。我走近它在我的當前項目的方式是把一切都放在一個全球性的自定義命名空間，並用它來繞過必需的引用：然後

var MyNamespace = {}; 

MyNamespace.init = function() { 
    MyNamespace.appView = new MyAppView(); 
    MyNamespace.router = new MyRouter(); 
    // etc 
} 

意見可以參考的必要MyNamespace.router。但它看起來像這樣將無法工作/不與require.js鼓勵，所以這裏有一些其他的選項：

• 永遠不要叫路由器明確 - 相反，改變全局狀態對象路由器收聽。這實際上是我在當前項目中完成的工作 - 有關更多詳細信息，請參閱this response。

• 將路由器連接到頂層視圖（通常稱爲AppView），使其可以全局訪問，並使用AppView.router.navigate()。

• 創建另一個模塊，該模塊提供了一個內部調用Backbone.history.navigate()的實用函數navigate。這與你正在做的事情沒有什麼不同，但它會使它稍微更加模塊化，並且始終不讓你使用全局引用。這也允許您更改內部實現。

Answer 2

你能做到這一點的老式方法with window.location.hash :)

window.location.hash = "Edit/1" 

如果您不需要明確的路線，這裏有一個備用解決方案。當你的應用程序啓動時創建的任何地方延伸主幹活動

window.EventDispatcher = _.extend({}, Backbone.Events); 

然後在一個對象，你應用程式，您可以監聽事件

EventDispatcher.bind("mymodel:edit", this.editHandler, this); 

而且還從任何地方發出事件，data以下任何PARAMS你想要一起發送

EventDispatcher.trigger("mymodel:edit", data); 

Answer 3

如果其他人正在尋找像我這樣的問題的解決方案，我發佈了我最終做的事情。如果您使用樣板backbone.js，那麼您將在router.js中有initialize()函數。我修改了initialize()功能如下所示：

initialize = function() { 
    var app_router; 
    app_router = new AppRouter(); 

    // Extend the View class to include a navigation method goTo 
    Backbone.View.goTo = function (loc) { 
    app_router.navigate(loc, true); 
    }; 

    Backbone.history.start(); 
}; 

由於Backbone.js的的繼承的特別味道，這讓讓我打電話給MyView.goTo(location);從內我的任何意見。

Answer 4

對我來說，與GOTO功能的解決方案有輕微的變化

Backbone.View.prototype.goTo = function (loc) { 
     appRouter.navigate(loc, true); 
    }; 

Answer 5

我知道這個問題是舊的工作，但我想知道你爲什麼不爲了得到路由器使用require.js ：

define(['./PathToRouter', ], function (router) { 
    return Backbone.View.extend({ 
     template: Handlebars.compile($('#template').html()), 

     events: { 
      'click .edit': 'edit' 
     }, 

     render: function() { 
      //Create and insert the cover letter view 
      $(this.el).html(this.template(this.model.toJSON())); 
      $('#View').html(this.el); 

      return this; 
     }, 

     edit: function() { 
      router.navigate('Edit/' + this.model.id, true); 
     } 
    }); 
}); 

Answer 6

這種方法怎麼樣？作爲主幹在所有4個組件中實現了模板模式，通過一些設計，您可以通過應用程序的路由器爲每個視圖提供一個簡單的導航機制，而無需進行任何循環引用（這是我在其他類似帖子中看到的，但儘量避免它）。

路由器組件，而不是太大的不同從其他路由器的例子：

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

      var MyRouter = Backbone.Router.extend({ 
       routes: { 
        'viewA': 'viewA', 
        'viewB': 'viewB' 
       }, 

       initialize: function() { 
        ... 
       }; 
      }, 
      viewA: function() { 
       ... 
      }, 

      viewB: function() { 
       ... 
      } 
}); 

return MyRouter; 
}); 

應用，創建路由器實例並觸發傳遞這種情況下，第一個視圖：

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

    function initialize() { 

     //route creation 
     if (!this.routes) 
      routes = new Router(this); 
     //backbone history start 
     Backbone.history.start(); 

     //ViewA navigation, bigbang 
     if (!this.viewA) 
      this.viewA = new ViewA({router: this.routes}); 
     this.viewA.render(); 
    } 

    return { 
     initialize: initialize 
    }; 
}); 

基本視角，基部構造定義所有視圖和導航方法：

define('BaseView', ['jquery', 'underscore', 'backbone', ... 
], function ($, _, Backbone, ...) { 
    var BaseView; 

    BaseView = Backbone.View.extend({ 
     id: '...', 

     constructor: function (options) { 
      this.router = options.router; 
      this.model = options.model; 
      Backbone.View.prototype.constructor.call(this); 
     }, 
     initialize: function() { 
      this.template = _.template(tpl); 
     }, 

     events: { 

     }, 
     render: function() { 
      $(this.el).html(this.template()); 

      return this; 
     }, 
     //Provides transparent navigation between views throught the backbonejs 
     //route mechanism 
     navigate: function(pageId) 
     { 
      this.router.navigate(pageId, {trigger: true}); 
     } 
    }); 

    return BaseView; 
}); 

查看實例，每個視圖從基地之一，而不是主幹延伸，繼承了基礎的行爲：

define('ViewA', ['jquery', 'underscore', 'backbone', 'BaseView' 
], function ($, _, Backbone, BaseView) { 
    var ViewA; 

    ViewA = BaseView.extend({ 
     id: '...', 

     constructor: function (options) { 
      this._super("constructor"); 
     }, 

     ... 
     foo: function() 
     { 
      ... 

      this.navigate("viewB"); 
     } 
    }); 

    return ViewA; 
}); 

這對我的作品，也可以在其他項目中重複使用。

Answer 7

對我來說，我向主應用程序中添加了一個對象，像這樣;你可以說windows.app.router.navigate（{''，trigger：true}）。在你看來，你可以說windows.app.router.navigate（{''，trigger：true}）。不知道在這種情況下全球範圍確定是否是好的做法，但它對我有用。

Answer 8

我有一個用於路由AMD模塊的新解決方案。

RequireJS路由器https://github.com/erikringsmuth/requirejs-router

這需要延遲加載AMD模塊的方式爲您導航到每一頁。使用Backbone路由器，您需要預先將所有視圖作爲依賴項。這會在首頁加載時加載所有應用程序的Javascript。當您導航到每個路由時，RequireJS路由器會延遲加載模塊。

示例main。js用於運行你的應用程序

define([], function() { 
    'use strict'; 

    // Configure require.js paths and shims 
    require.config({ 
    paths: { 
     'text': 'bower_components/requirejs-text/text', 
     'router': 'bower_components/requirejs-router/router' 
    } 
    }); 

    // Load the router and your layout 
    require(['router', 'js/layout/layoutView'], function(router, LayoutView) { 
    var layoutView = new LayoutView(); 
    // The layout's render method should draw the header, footer, and an empty main-content section 
    // then load the content section. 
    // render: function() { 
    // this.$el.html(this.template({model: this.model})); 
    // router.loadCurrentRoute(); 
    // } 

    // Configure the router 
    router 
     .registerRoutes({ 
     home: {path: '/', moduleId: 'home/homeView'}, 
     order: {path: '/order', moduleId: 'order/orderView'}, 
     notFound: {path: '*', moduleId: 'notFound/notFoundView'} 
     }) 
     .on('statechange', function() { 
     // Render the layout before loading the current route's module 
     layoutView.render.call(layoutView); 
     }) 
     .on('routeload', function(module, routeArguments) { 
     // Attach the content view to the layoutView's main-content section 
     layoutView.$('#main-content').replaceWith(new module(routeArguments).render().el); 
     }) 
     .init({ 
     // We're manually calling loadCurrentRoute() from layoutView.render() 
     loadCurrentRouteOnStateChange: false 
     }); 
); 
); 

define([], function() { 
    'use strict'; 

    // Configure require.js paths and shims 
    require.config({ 
    paths: { 
     'text': 'bower_components/requirejs-text/text', 
     'router': 'bower_components/requirejs-router/router' 
    } 
    }); 

    // Load the router and your layout 
    require(['router', 'js/layout/layoutView'], function(router, LayoutView) { 
    var layoutView = new LayoutView(); 
    // The layout's render method should draw the header, footer, and an empty main-content section 
    // then load the content section. 
    // render: function() { 
    // this.$el.html(this.template({model: this.model})); 
    // router.loadCurrentRoute(); 
    // } 

    // Configure the router 
    router 
     .registerRoutes({ 
     home: {path: '/', moduleId: 'home/homeView'}, 
     order: {path: '/order', moduleId: 'order/orderView'}, 
     notFound: {path: '*', moduleId: 'notFound/notFoundView'} 
     }) 
     .on('statechange', function() { 
     // Render the layout before loading the current route's module 
     layoutView.render.call(layoutView); 
     }) 
     .on('routeload', function(module, routeArguments) { 
     // Attach the content view to the layoutView's main-content section 
     layoutView.$('#main-content').replaceWith(new module(routeArguments).render().el); 
     }) 
     .init({ 
     // We're manually calling loadCurrentRoute() from layoutView.render() 
     loadCurrentRouteOnStateChange: false 
     }); 
); 
);