ピースペース

SPA: ナビゲーション

leave a comment »

さて、ViewとViewModelの関係はだいたい見えた。
しかし、それだけでは、出身地が表示されるカラクリの説明には十分ではない。
apiにアクセスしてVMを更新する処理は、いったいどこから起動されたのだろう?

その処理はHomeViewModelの中にある。
MVC5 SPA Templateは、ここはSammy.jsを使うようになっているようだ。
でもって、app.addViewModelでVMをappに登録する際、
ViewのリンクやボタンにバインドできるnavigateTohogeコマンドも用意されるようになっている。
ただ、navigateTohogeは、location.hashを登録した名前(#hoge)に変更するだけで、
自動的にViewの切り替えを行ってくれるわけではない。(AppViewModel自体にその機能はない)

navigateTohogeしてlocation.hashが変わった時に何をするか?
は、HogeViewModelに自分で記述する必要がある。
が、そのハンドラーに一体どうゆうコードを書けば良いの?が、よくわからない;;
その中ででajaxでサーバーから新たなViewを取得して既存のViewを置き換えても良いのか?
を迷う。 この時点でko.applyBindingsは終了しているので、
その後にそれ(ViewのReplace)を行うのは思い切り違和感がある。
が、それができなければ、navigateToじゃないよな~とも思って、途方に暮れる;;

knockoutじゃなくkendoUIを使うサンプルがあって
http://msdn.microsoft.com/ja-jp/magazine/dn605877.aspx
こっちは、SPAフレームワークとしてナビゲーション時にViewを切り替えてくれる機能もある。
これを見てしまうと、VS2013の新しいSPA Templateがどこか欠陥品に感じてしまうのだが…

使用するViewは最初に全部ロードしておき、
VMを使って表示/非表示をコントロールしてViewを切り替えているように見せる。
が正解かもしれない。

http://learn.knockoutjs.com/#/?tutorial=webmail
このサンプルもそうしているので、これがknockoutの流儀でいいのだろう!
そう考えると、最初にまとめて読み込むViewがそのSPAを構成するViewの全て。となり、
SPAとその他MVCなViewの区分けも明確でとてもわかりやすいし、
SPAのサイズというか粒度も大きくなりすぎないように歯止めもかかって良いかもしれない。

結論、SPAでナビゲーションに使用するViewはSPAなページに全部含めてまとめてLoadする!
Viewの切替もVMでコントロールする。

Written by nasu38yen

2014年6月5日 @ 2:37 PM

カテゴリー: 未分類

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。