2013-03-13 15 views
6

Backbone.jsを使用してアプリケーションを起動する方法についての多くのチュートリアルや情報があります。私はこれらのチュートリアルの助けを借りて徐々に1つ作成しています。私はルータのコンセプトを理解していないようです。さて、私はルータが出発点であり(アプリケーションの状態を伝えている)、そこにもっと多くのロジックを置かない方が良いことを認識しています。バックボーン内のビュー内のコールルート

私は1台のルータを持っています。私のアプリは、最初にヘッダー、フッター、およびページの主要部分を読み込みます。主要部分では、まずユーザーにログインする必要があります。ログインページを読み込むには、次のようにします:

 var AppRouter = Backbone.Router.extend({ 
      initialize : function() { 
      var headerView = new HeaderView({el:$('#header')}); 
      headerView.render; 

      var footerView = new FooterView({el:$('#footer')}); 
      footerView.render; 

      var loginView = new LoginView({el:$('#login')}); 
      loginView.render; 
     }, 
     routes : { 
      "inbox" : "inbox", 
      "sentbox : "sentbox" 
     }, 
     inbox : function() { 
      // ... 
     }, 
     sentbox : function() { 
      // ... 
     } 
    }); 
    app = new AppRouter(); 
    Backbone.history.start(); 

ログインに成功すると、メールページが読み込まれます。 MailViewには、例えば、送信トレイを表示するイベントがいくつかあります。この時点で

 events: { 
     "click .inbox": "showInbox", 
     "click .sentbox": "showSentbox", 
     }, 
     showInbox : function() { 
      // app.route() or app.inbox() - ? 
     } 

、私は、ルータは、それぞれ../#inbox../#sentboxを示したいと思います。私はルータの方法の1つをここでアドレスバーに表示する必要があるかどうか疑問に思っています。なぜ私は混乱しています。なぜなら、1台のルータの使用がより多くなると言われているからです。私がそうするなら、私のAppRouterはもっと複雑になります。別の問題は、ユーザーが直接アドレスを入力する場合、私はそのページを読み込む必要があります。私は、ロジックをAppRouterの内部に入れる必要があると思います。

ここに正しいアプローチを教えてください。あらかじめありがとう!あなただけを介して適切なルートにブラウザを送る

答えて

12

)(Router.navigateをチェックアウト(http://documentcloud.github.com/backbone/#Router-navigate

私のAppオブジェクト内のルータ、例えば

var App = { 
    Views: {}, 
    Routers: {}, 
    Models: {}, 
    data: {} 

    initialize: function() { 
    this.data.mainRouter = new App.Routers.MainRouter(); 
    } 
}; 
App.MainRouterは次のように定義されて

:私は新しいルートにナビゲートしたい場合は、私が呼ぶ、私のビュー内のその後

App.Routers.MainRouter = Backbone.Router.extend({ 

    routes: { 
    'route1' : 'route1handler', 
    'route2/:param' : 'route2handler' 
    }, 

    ... 
}); 

App.data.mainRouter.navigate('route2/param1'); 
+7

ルーターがあなたの視点からアクセスできない場合は、 'Backbone.history.navigate'も呼び出すことができます。 – jgillich

+0

良い点 - これはおそらく良いオプションです –

+3

これはURLハッシュを変更するだけで、ルートのハンドラメソッドを起動しません – skaterdav85

7

Backbone.history

location.href = "#/the_route_you_want"; 

リスナーはhashChangeイベントをキャプチャし、適切なビューが表示されます。

これはHTMLを経由して、非常に簡単な方法で行うことができます。私は通常私のインスタンス変数を保存

<a href="#/the_route_you_want">The Route You Want</a> 

For further reading.

1

ご希望の場合また、ルート機能を呼び出すには、トリガーオプションをtrueに設定します。

app.navigate("help/troubleshooting", {trigger: true}); 
関連する問題