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

単一のルートを別々のルートに分割することを検討しましたか?

Backbone docs が言うようにBackbone.history.start、DOM 対応 (IE 用) で実行し、すべてのルーターを開始した後に実行してください。

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

私が気付いていなかったBackbone.historyのは、それが「マスター」ルーターであるため.bind、子ルーターにイベントを設定してそれらのルートだけに影響を与えるか.bind、Backbone.history にイベントを設定してそれらすべてに影響を与えることができるということです。明らかにこれは、ヘルパー メソッドを設定してmaster、すべての子ルーターで再利用できることを意味します。

于 2012-06-08T06:23:17.197 に答える
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 に答える
0

問題は、少なくとも私が理解している場合、すべてを一度にロードして、いくつかの設定で使用できるようにしようとしていることです。

たとえば、シリーズの詳細テンプレートをそのビューの外にロードするのはなぜですか?

AMDがどのように機能するかの例をここに含めました： バックボーンデザイン または要旨： https ://gist.github.com/2863979

ご覧のとおり、1 つの巨大な router.js ファイルにすべてをロードするわけではありません。

優れたリソース: http://addyosmani.github.com/backbone-fundamentals/#modularjs

psバックボーンとrequire.jsのrouter.jsファイルの概念に出くわしていません。このアイデアはどこから得たのですか？

于 2012-06-04T01:41:37.060 に答える
0

さらに別の方法があります：

  1. どのルートについても知らないルーター (グローバルまたはアプリのメンバー) をインスタンス化する
  2. 各ビューの initialize() メソッドで、そのビューによって処理されるルートを定義します

router.route('タスク', 'タスク', 関数 () { ... })

  1. Backbone.history.start() を呼び出す前に、メインの App ビューですべてのトップレベル ビューをインスタンス化します。
  2. (オプション) アプリの起動時にデフォルトのビュー ルートに移動する

詳細な説明とサンプル コードはhttp://mariusa.github.io/writings/handling-backbone-routes.htmlにあります。

于 2014-03-13T05:27:38.373 に答える
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 に答える