如何避免BACKBONEJS + requireJS中的長路由器文件？

// Filename: router.js 

define(['jquery','underscore','backbone', 
'collections/series','views/series/list','text!templates/series/list.html', 
'models/series', 
    'views/series/details','text!templates/series/details.html', 
    'views/series/preview','text!templates/series/preview.html' 
], function($, _, Backbone, 
     SeriesCollection, SeriesListView, SeriesListTemplate, 
     SeriesModel, 
     SeriesDetailsView, SeriesDetailsTemplate, 
     SeriesPreviewView, SeriesPreviewTemplate 
){ 

_.templateSettings = { interpolate : /\{\{(.+?)\}\}/g }; 

...

UPDATE：如何避免BACKBONEJS + requireJS中的長路由器文件？

原因所有這一切都在我的路由器的功能，我這樣做：

seriesList: function(){ 
    // We have no matching route, lets display the home page 

    var seriesCollection = new SeriesCollection(); 
    seriesCollection.fetch({success:function(){ 

     var seriesListView = new SeriesListView({collection:seriesCollection, el:'#page'}); 
     seriesListView.template = _.template(SeriesListTemplate); 
     seriesListView.render(); 
    }}); 

}

意義 - 我是連接模板和視圖時，返回的數據。它的作品 - 但它是一個很好的做法？

來源

2012-06-04 Guy

我在閱讀了以下有關不同方法之後，會擔心它會長大併成長...... – Guy

http://addyosmani.github.com/backbone-fundamentals/#namespacing。我決定按照以下建議嘗試按需獲取它們：http：//addyosmani.github.com/backbone-fundamentals/#organizingmodules – Guy

您仍無法在路由器中加載模板。在需要它的視圖內部加載模板，而不是路由器。你只需要在路由器中只需要你需要的東西，然後在模塊中加載那些需要的東西。 – Mosselman

在我看來，現在你的路由器是一種神的對象。它知道太多。我認爲重構應用程序是有意義的，以便更清楚地區分問題。然後你的路由器不會像上面那樣，並且不會有太多的依賴關係。例如，你可以讓視圖負責自己的模板（順便說一下，和渲染本身）：

// router.js 
seriesList: function(){ 
    var seriesCollection = new SeriesCollection(); 
    var seriesListView = new SeriesListView({collection:seriesCollection, el:'#page'}); 
    seriesCollection.fetch(); 
} 

// view/series/list.js 
define(['jquery', 
     'underscore', 
     'backbone', 
     'text!templates/series/list.html'], function($, _, Backbone, SeriesListTemplate){ 

    var SeriesListView = Backbone.View.extend({ 
     template: _.template(SeriesListTemplate), 

     initialize: function (options) { 
      this.collection.on('reset', this.render, this); 
     } 
     ... 
    }); 
    return SeriesListView; 
}

然後根據模板依賴將從router.js消失。

來源

2012-06-04 04:28:25 theotheo

我同意你對神對象的陳述。然而，你的建議只需要3個依賴。 router.js仍然會隨着應用程序的增長而增長，並且將變得不可讀。 – Guy

問題是，至少如果我的理解，你想一次全部加載了一切，所以，它是提供給您的一些設置？

例如，你爲什麼在一系列細節模板加載之外的它的看法？

試試這個答案，我今天給別人，包括我的AMD將如何在這裏工作的例子： Backbone Design 或要點： https://gist.github.com/2863979

正如你可以看到我沒有在一個巨大的負荷了一切router.js文件。

一個很好的資源： http://addyosmani.github.com/backbone-fundamentals/#modularjs

附：我還沒有遇到過主幹和require.js的router.js文件的概念。你從哪裏得到這個想法？

來源

2012-06-04 01:41:37 Mosselman

tnx。你的方法似乎很紮實。在將您推薦的資源與我今天在某處找到的另一資源相結合後，我將它與它結合。我在上面的更新中添加了我的方法的原因。你認爲這是有效的嗎？ – Guy

我會/我做什麼，有骨幹路由器只是觸發我在我的AppView中處理的事件。這樣我可以做'Event.subscribe（'route：home'，this.showHome）;''或類似的東西。爲了卸載接受如此多變量的'define'方法的壓力，您應該以某種方式嵌套您的視圖。我相信你可以將一些較小的視圖分組在一個「管理」更大的視圖中。比方說，你有很多邊欄小部件，加載到側欄視圖。你也可以用這種方式概括一些他們的功能。 – Mosselman

你有沒有考慮將你的單一路線到單獨的路線？

爲骨幹文檔說，一定要運行在DOM-準備就緒（IE）Backbone.history.start和你啓動的所有路由器之後。

$(function(){ 
    new WorkspaceRouter; 
    new HelpPaneRouter; 
    Backbone.history.start({pushState: true}); 
});

東西我沒想到的是，Backbone.history是「大師」的路由器，所以你可以設置你的孩子路由器上.bind事件對Backbone.history只是那些路線或.bind以影響他們。顯然這意味着您可以在master上設置輔助方法，以便在所有子路由器上重複使用。

來源

2012-06-08 06:23:17

可以移動的依賴關係到路由處理程序：

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

    var Router = Backbone.Router.extend({ 

     routes: { 
      "Series(/)": "seriesList" 
     }, 

     seriesList: function() { 
      require(['collections/series', 'views/series/list'], function(SeriesCollection, SeriesListView) { 
       var seriesCollection = new SeriesCollection(); 
       var seriesListView = new SeriesListView({collection:seriesCollection, el:'#page'}); 
       seriesCollection.fetch(); 
      }); 
     } 
    }); 
});

這使得define()通話更易於管理，並直到路由實際使用負荷推遲。

來源

2013-11-20 21:31:24

這裏的另一種方式：

實例化一個路由器（全局或應用程序的成員）不知道在每個視圖的初始化任何途徑
（）方法，確定由該處理途徑鑑於

router.route（ '任務'， '任務'，函數（）{ ... }）

實例中主應用程序的查看所有頂級視圖，調用Backbone.history.start（）之前
（可選）導航到默認視圖路線在http://mariusa.github.io/writings/handling-backbone-routes.html開始該應用

更多的說明和示例代碼時

來源

2014-03-13 05:27:38

如何避免BACKBONEJS + requireJS中的長路由器文件？

回答

相關問題