1 
// 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 };

...

更新：

所有这一切的原因是在我的路由器功能中我正在这样做：

 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();
    }});

}

含义 - 我正在连接模板并在数据返回时查看。它有效 - 但这是一种好的做法吗？

4

5 回答 5

1

在我看来，你的路由器现在是一种上帝对象。它知道的太多了。我认为重构应用程序以实现更清晰的关注点分离是有意义的。然后你的路由器就不会像上面那样，也不会有那么多依赖。例如，您可以让视图负责其自己的模板（顺便说一句，并负责呈现自身）：

// 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-04T04:28:25.540 回答
1

您是否考虑过将您的单一路线分成不同的路线？

正如 Backbone 文档所说，一定要Backbone.history.start在 DOM-ready（对于 IE）上运行，并且在你启动所有路由器之后。

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

我没有意识到这Backbone.history是“主”路由器，因此您可以.bind在子路由器上设置事件以仅影响这些路由或.bind在 Backbone.history 上设置所有事件。master显然，这意味着您可以在所有子路由器上设置要重用的辅助方法。

于 2012-06-08T06:23:17.197 回答
0

问题是，至少如果我理解它，您正在尝试一次加载所有内容，以便您可以使用它进行某些设置？

例如，为什么要在其视图之外加载系列详细信息模板？

试试我今天给某人的这个答案，我在这里提供了一个 AMD 将如何工作的示例： 骨干设计 或要点： https ://gist.github.com/2863979

如您所见，我不会将所有内容都加载到一个巨大的 router.js 文件中。

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

ps 我还没有遇到过用于骨干网和require.js 的router.js 文件的概念。你是从哪里得到这个想法的？

于 2012-06-04T01:41:37.060 回答
0

您可以将依赖项移动到路由处理程序：

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-20T21:31:24.537 回答
0

这是另一种方式：

  1. 实例化一个不知道任何路由的路由器（全局或应用程序的成员）
  2. 在每个视图的 initialize() 方法中，定义由该视图处理的路由

router.route('tasks', 'tasks', function () { ... })

  1. 在调用 Backbone.history.start() 之前，在主 App 视图中实例化所有顶级视图
  2. （可选）启动应用程序时导航到默认视图路由

更多解释和示例代码在http://mariusa.github.io/writings/handling-backbone-routes.html

于 2014-03-13T05:27:38.373 回答