3

Require.jsを使用してBackbone.jsアプリを作成中です。各ビューファイルは1つのリソースに対応します（例：「ニュース」）。各ビューファイル内で、各アクション（'index'、'new'など）のバックボーンビューを宣言します。ビューファイルの下部で、ルーターから必要な情報を受け取り、インスタンス化するビューを決定します（ルーターから渡された情報に基づいて）。

これはすべてうまく機能しますが、多くのコードが必要であり、「backbone.jsの方法」ではないようです。一つには、私は状態を管理するためにURLに依存しています。もう1つは、backbone.jsの多くの例で表示される_.bindを使用していません。言い換えれば、私はそれを正しくやっていないと思います、そして私のコードベースはにおいがします...私のアプリをより良く構造化する方法について何か考えはありますか？

router.js

define([
  'jquery',
  'underscore',
  'backbone',
  'views/news'], 
  function($, _, Backbone,  newsView){
    var AppRouter = Backbone.Router.extend({
        routes:{
            'news':'news',
            'news/:action':'news',
            'news/:action/:id':'news'
        },

        news: function(action, id){
            newsView(this, action, id).render();
        }
    });


    var intialize = function(){
        new AppRouter;
        Backbone.history.start()
    };

    return{
        initialize: initialize;
    };
}

news.js（'views / news'）

define([
  'jquery',
  'underscore',
  'backbone',
  'collections/news',
  'text!templates/news/index.html',
  'text!templates/news/form.html'

  ], function($, _, Backbone, newsCollection, newsIndexTemplate, newsFormTemplate){

    var indexNewsView = Backbone.View.extend({
        el: $("#content"),

        initialize: function(router){
            ...
        },

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

    var newNewsView = Backbone.View.extend({
        el: $("#modal"),

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

    ...

    /*
     *  SUB ROUTER ACTIONS
     */

    var defaultAction = function(router){
      return new newsIndexView(router);
    }

    var subRouter = {
      undefined: function(router){return defaultAction(router);},

      'index': function(router){ return defaultAction(router);},

      'new': function(){
        return new newNewsView()
      },

      'create': function(router){
        unsavedModel = {
          title : $(".modal-body form input[name=title]").val(),
          body  : $(".modal-body form textarea").val()
        };
        return new createNewsView(router, unsavedModel);
      },

      'edit': function(router, id){
        return new editNewsView(router, id);
      },

      'update': function(router, id){
        unsavedModel = {
          title : $(".modal-body form input[name=title]").val(),
          body  : $(".modal-body form textarea").val()
        };

        return new updateNewsView(router, id, unsavedModel);
      },
    }

    return function(router, action, id){
      var re = /^(index)$|^(edit)$|^(update)$|^(new)$|^(create)$/
      if(action != undefined && !re.test(action)){
        router.navigate('/news',true);
      }
      return subRouter[action](router, id);
    }


  });
4

3 に答える 3

6

「Backbone.jsの方法」は実際にはないことを強調することが重要だと思いますが、Backboneが行うべき作業を複製しているように見えます。

アプリケーションの独立したセクションごとに専用のルーターを用意することが理にかなっていることに同意します。しかし、一見すると、「サブルーター」セクションで行っていることは、Backbone.Router機能を再作成しているように見えます。URLAppRouterを処理する必要はまったくありません。/newsニュース固有のルートでを初期化するだけでNewsRouter、ニュース関連のURLを処理できます。

var NewsRouter = Backbone.Router.extend({
    routes:{
        'news':             'index',
        'news/create':      'create',
        'news/update/:id':  'update',
        'news/edit/:id':    'edit'
    },

    index: function() { ... },

    create: function() { ... },

    // etc
});

を呼び出す前にこれが初期化されている限りBackbone.history.start()、ルートのURLリクエストをキャプチャし、を処理する必要はありませんAppRouter。また、ビューの下部にある醜いコードを処理する必要はありません。基本的には、コアBackbone.Routerが実行することを実行するだけです。

于 2011-11-08T00:37:10.630 に答える
2

私はrequire.jsとバックボーンも使用しています。私が提案する主な違いは、各ファイルが1つのビュー、モデル、ルーター、またはコレクションのみを返す必要があることです。

したがって、メインのhtmlページにはメインルーターが必要です。そのルーターは、各ルートに基づいたいくつかのビューと、ブートストラップモデルを必要とするモジュールです。各ルーターメソッドは、関連するブートストラップされたモデルピースを関連するビューに渡します。

そこから、各ファイルが1つのバックボーン（モデル、コレクション、ビュー、ルーター）であり、使用する要素だけが必要である限り、非常にクリーンな状態が保たれます。これにより、多くのjsファイルが作成されます（現在のプロジェクトでは約100個あります）が、require.jsの最適化が機能する場所です。

それがお役に立てば幸いです。

于 2011-11-08T03:04:02.707 に答える
0

次のようにルートを構成してみませんか。

        routes:{
            'news':'news',
            'news/edit/:id':'editNews',
            'news/new':'newNews',
            ...
        }
于 2011-11-07T23:55:51.417 に答える