複数のページ

Question

私はBACKBONE.JSを使用して、単一ページのアプリケーションを構築しています..

私はあなたが元のページの上に多くのページを表示する方法を知りたいです。あなたがそれをどのように構築するかのように。

これを達成するためにバックボーンルーターをどのように使用しますか？ボードの詳細などのtrelloで例えば

BasePageクラス

そして今、ベースページのトップにあなたが持っているカードの詳細のような動的なコンテンツ

どうすればこのようなアーキテクチャができますか？

Answer 1

私は50以上のページを持つプロジェクトでこれまでにいくつかのアプローチを行いました。私はbackbone.jsを使用していませんでしたが、アプローチは単純であり、セレクタにjQueryを使用する以外の方法を学ぶためのフレームワークは必要ありません。

両者は共通して、コンテンツをウィンドウにプルできる単一のオーバーレイウィンドウを作成します。私は最初から鉱山を書いたが、jQueryのUIダイアログを簡単に使うことができた。 2つのアプローチは、コンテンツがどのように引き出されるかだけが異なります。また、リンク上の情報を使用することで、ルールとして「モジュール」またはオーバーレイコンテンツを取得する必要があります。アプリを起動するためにたくさんのスクリプトを読み込む必要はありません。モジュールがあなたにふさわしい振る舞いをするようにしてください。

オプション1）そのようなプレースホルダ変数を使用して、スタンドアロンのWebページからコンテンツをプルするjQueryのloadメソッドを使用します。

var $ph = $('<div />'); 
$ph.load(URL); // loads gui of remote URL + executes any script that URL has 

$用pH VARは現在、外部からにロードされているすべてのGUIが含まれていますURLを使用すると、セレクタを使用して特定のHTMLを抽出し、必要に応じてDOMまたはオーバーレイに配置できます。ここで

は、スタンドアローンのHTML出力の例です：

<div class="module"> 
    <a class="link">click me</a> 
</div> 
<script> 
(function(){ 
    // put any private vars here 
    $('.module .link').click(function(){ 
     // do something 
    }); 
})(); 
</script> 

あなたは（）を削除したり、jQueryの経由オーバーレイ内のDOMを破壊した場合、それは自動的に直接バインド」別名割り当てられたすべてのイベントを削除します（ '。namespace'）。live（ 'click.namespace'）を使用すると、 "die"や "undelegate"などを心配する必要があります。清掃されます。 より良い例は、ドキュメントがハッシュ履歴を使用してかなりシンプルであるため、カスタマーセクション内です。

2）オーバーレイ内のiframeを使用してURLを割り当てます。

これは最も簡単なオプションですが、呼び出される各ページが完全なスタンドアロンの動作とiframeとの依存関係を持つ必要があるため、少し遅くなります。また、固定オーバーレイウィンドウを持たない限り、フレームのサイジングなどを心配する必要があります。

ローディング中にiframeをオーバーレイする必要があります。iframeで親に話して、完了したローディングを通知してローダーを非表示にする必要があります。

私はいくつかのサイトのためにこれをしなかったが、そのうちの一つは、あなたがコードを取得するには、ここで見ることができます開発中のサイトです - >

http://dev.zipstory.com（ログインして私のzipstoryに移動し、「グループ」の設定などへをクリックしますこれを参照して、ソースを表示してどのようにすべてを行ったかを確認してください）

iframeに関することは、あなたが典型的なセットとして同意するiframeからの標準メッセージを受け入れる親にいくつかのコードを書くべきですあなたの目標がKISSのアプローチである限り、必要に応じて即座に追加したり、リファクタリングしたりすることができます。

Answer 2

各「動的コンテンツ」ページは、バックボーンビューでレンダリングされたテンプレート（アンダースコア.jsは_テンプレート（））を提供する必要があります。メインページには新しいビューを初期化してテンプレートをレンダリングするイベントが必要です。 todosアプリ（http://documentcloud.github.com/backbone/docs/todos.html）を見て、バックボーンアプリの流れについての基本的な考えを得てください。