孝造(19)152152件のシェア(すこし話題の記事)この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。Pluginとして実装されているScrollSpyを真似して作ってみたいと思います。解説が長くなってしまったので前後編に分けてご紹介します。Backbone.jsでつくるMVPなUIパターン【スクロールスパイ】後編デザイン4つの文章に対しそれぞれナビゲーションが存在し、文章のエリアをスクロールして閲覧している文章に対応するナビゲーションがアクティブ表示になるというものです。</div></div>Bootstrapのデザインに引っ張られていますが全体を囲むコンテナdiv#ui-scroll-spyナビゲーションdiv.scroll-spy-nav文章を囲むスクロールエリアdiv.scroll-spy-contents各文章div.scroll-spy-contentと定義しています。仕様データを元にナビゲーションと文章を描画できる文章エリアをスクロールすると対応するナビゲーションのアクティブ表示が切り替わるナビゲーションをクリックすると対応する文章の位置までスクロールされるハッシュフラグメントから状態を再現できる今回はデータのCRUD等は行わないのでモデルを使用せず以下のクラスで実装してみようと思います。Backbone.RouterBackbone.EventsBackbone.View各コンポーネントとクラスを対応させた設計は以下の様なイメージです。いうUIパーツの集合を扱うクラスを初期化しhtmlの描画とイベントの購読などを行います。ハンドリングし自身の親クラスに対して通知を行なっていく仕組みです。それでは各コンポーネントを実装していきます。クラスから実装していきます。Backbone.Viewクラスを継承します。Backbone.View.extend({});テンプレート次にボタンのhtmlテンプレートを定義して、コンパイルした状態で取り込むようにします。いう関数にテンプレート文字列を与えることで、html文字列を生成してくれる関数にコンパイルしてくれます。コンストラクタ次はNavViewオブジェクトの新規生成時に自身のUIをjQueryオブジェクトで生成し、格納する親エレメントのjQueryオブジェクトを受け取るようにしておきます。いう関数を定義しておくと新しくオブジェクトを生成した際に自動で実行されるようになります。メソッドを実装します。deactivate関数を実装しておきます。付け外しすることで切り替えるようにします。以上でNavViewの実装は完了です。まとめたコードは以下になります。