2012-04-28 13 views
3

私は私のバックボーンアプリを整理するためにRequireJSを使用して、次のように私のルータモジュールは次のとおりです。モジュール式のBackbone.jsアプリでViewモジュールでRouterを使用するにはどうすればいいですか?

define([ 
'jquery', 
'underscore', 
'backbone', 
'collections/todos', 
'views/todosview' 
], function($, _, Backbone, TodosCollection, TodosView){ 
var AppRouter = Backbone.Router.extend({ 

    routes: { 
     "": "index", 
     "category/:name": "hashcategory" 
    }, 

    initialize: function(options){ 
     // Do something 
    }, 

    index: function(){ 
     // Do something 
    }, 

    hashcategory: function(name){ 
     // Do something 
    } 
}); 

var start = function(){ 
    p = $.ajax({ 
     url: 'data/todolist.json', 
     dataType: 'json', 
     data: {}, 
     success: function(data) { 

      var approuter = new AppRouter({data: data}); 
      Backbone.history.start(); 
     } 
    });  
}; 

return { 
    start: start 
}; 
}); 

そして、私は、全体のアプリを起動するためにRouter.start()を使用する別のappのモジュールを持っています。 私のBackbone.Viewモジュールでは、このRouterモジュールでRouter.navigateを使用してルートをトリガーします。 次のように私の見解モジュールの開始部分がある:

define([ 
'jquery', 
'underscore', 
'backbone', 
'models/todo', 
'views/todoview', 
'text!templates/todo.html', 
'router' 
], function($, _, Backbone, TodoModel, TodoView, todoTemplate, Router){... 

しかし、私は、このモジュールでRouterを使用する場合、それは常にRouter is not definedを言います。私がしたいのは、このViewモジュールで何らかのアクションが発生したときにRouter.navigateに電話することです。だから私はこれをどのように達成できますか?

答えて

8

あなたが使用する他のすべてのモジュールに含まれる別個のモジュールを作成します。ルータインスタンスを接続し、後で参照する任意のビューまたはモジュールから呼び出すことができるオブジェクトを作成するだけです。 (他のものに加えて、データを格納して他のモジュールに簡単に渡す)

ここに最初に貼り付けたルータモジュールにこのモジュールを含めます。ルータモジュールの下部からスタート機能を削除します。そして、そのファイルの最後にAppRouterを返すだけです。

バックボーンの開始とルータの作成を終了するアプリケーションモジュールでは、私が参照していた共有オブジェクトにルータの初期化を保存できます。

IE、

shared.js - >ないDEPSが、YourObject = {}を作成します。あなたのオブジェクトを返す router.js - > shared.jsを含む app.js - > shared.jsとrouter.jsが含まれています。アプリはルーターを設定してYourObject.routerに保存し、バックボーンを開始します。あなたは今、あなたは、これが

Backbone.history.navigate(「」、{トリガー:真を})の使用についてモジュール

+0

私はapp.jの内容についてちょっと混乱しています。それについてもっと書いてください。どうも! – chaonextdoor

+0

app.jsは、実際のバックボーンアプリが起動する場所です(上記の「スタート」機能など)。基本的なアプリロジックですそれは何も返されず、他のモジュールには含まれません。アプリが起動する場所です。 – PStamatiou

+0

'start'関数を' route'モジュールから 'app'モジュールに移動することは何ですか?その後、 'app'モジュールで作成されたルータインスタンスを私の場合は' approuter'変数に入れ、share.jsの 'YourObject {}'に入れて、それからどこでもshared.jsを使うことができます。私は正しい? – chaonextdoor

3

教えられた推測です)

おそらく周期的な要件があります。ビューモジュールにルーターモジュールが必要で、ルーターモジュールにビューモジュールも必要です。

これは悪いデザインのような臭いです。ルーターモジュールは、ビュー/モデルをインスタンス化してレンダリングするために、おそらくビュー/モデルについて知る必要があります。あなたの意見は、それらを作成するどこかのルータがあるということを知らなくてはなりません。彼らがしなければならないのは、ルータのルートをトリガーするリンクを提供することだけです。

+0

あなたが言ったように、彼らがしなければならないのは、**ルータのルートを引き起こすリンク**を提供することです。それが問題です。私はリンクをクリックするのではなく、ルータのルートをいくつかの他のアクションと関連づけたい。だから私はここでリンクを使いたくないので、ルータのルートをトリガするために 'Router.navigate()'関数を使わなければなりません。 **いくつかの他のアクション**は間違いなくViewモジュールで起動されます。だから私の知識に基づいて、私は 'Router.navigate()'をViewモジュールで使う必要があります。あるいはこれを修正する他の方法があるかもしれません。あるいは、私はRequireJSおよび/またはBackboneに対する誤解を持っているかもしれません。 – chaonextdoor

+0

あなたがしていることは、ルートを引き起こす火事イベントです! – ggozad

+0

ルータはlocation.hrefとlocation.hashの変更をリッスンしますか?したがって、場所を変更すると効果があります。 個人的に私は 'window.location.replace( '#login')でログアウトページにリダイレクトされたビューを持っていました。 – andho

0

何をshared.js必要が他のモジュールからYourObject.router.navigate()を呼び出すことができます。

関連する問題