2009-03-03 4 views
1

最初の大きなjavascript Webアプリケーションを作成しようとしている間に、何をすべきかを概念的に理解するのが難しいです。JavaScriptのイベントを扱うのは、特定のコンテンツにのみ適用されます。

ユーザーが選択したタブに応じて、コンテナ内に別のコンテンツを表示します。コンテンツはテキストだけでなく、さまざまなJavaScript関数とイベントを使用します。私はYahoo! UIライブラリの "TabView"実装ですが、この問題を処理する方法はおそらく他のTabアプローチにも当てはまります。私は何をやって考えていたことは基本的に以下の通りであった

タブごとに別々のモジュール(例えばMYAPP.modules.tabCalendarとMYAPP.modules.tabJournal)を作成します。ユーザーが別のタブをクリックするか、ブラウザのボタンで前のタブ状態に移動すると、MYAPP.modules [oldModule] .disable()とMYAPP.modules [newModules] .enable()を呼び出すことができます。これらの関数は、カスタムイベント(たとえば、コンテナに接続された一般的なクリックハンドラ)を購読または購読解除します。

イベントを処理する別の方法として、グローバルクリックハンドラを1つ使用する方法があります。クリックがコンテナ内にある場合は、現在選択されているタブを特定し、clickイベントをMYAPP.modules [currentTab] .onClick()に送信します。

グローバルクリックハンドラは、ページがロードされてからモジュールが購読しているカスタムイベントを発生させる可能性があり、各モジュールのonClickイベントが実行され、何かを行う必要があるかどうかが判断されます。

多くのオプションがあるようですが、このようなことを行う最善の方法について話すリソースを見つけるのが難しいです。私は正しい道にいますか?私はこれをどのように扱うべきですか?

+0

既存のタブストリップコンポーネントを使用していますか、これは自分の発明のためのものですか? –

+0

@ crescentfresh:私はYUI TabViewコンポーネントを使用しています。これを反映するためにコメントを編集しました。 –

+0

私は質問を理解しているか分からない - 各タブの要素が一意ではないので、それぞれ独立してイベントを設定できますか? –

答えて

1

TabViewに既に組み込まれているイベントを使用して、JSが処理をキューに入れるようにします。タブの

http://developer.yahoo.com/yui/tabview/#handlingevents

あなたは、前/次のタブがあなたのJSはそれが何をすべきかを把握するために十分以上であるべきものを選択し、そのように言ったことがあります変更します。あなたがイベントを見てそれに基づいて何かをする翻訳レイヤーを書こうとするなら、それは大丈夫ですが、厳密には必要ではありません。

1

私はこの問題に少し戸惑っています。

  1. はい、コードをモジュール化する必要があります。
  2. それぞれのモジュールに、それぞれのコンテナ内の要素のイベントハンドラを設定させます。

これだけです。 YUI TabViewはタブの切り替えを処理するので、何も有効/無効にする必要はありません。

関連する問題