ピースペース

SPAで一覧・詳細をやってみた

leave a comment »

 

もっとも良くあるパターンをSPAではどうやるのか?をやってみた。

spa_list

spa_edit

リストのリンクはどうなるの?は、
ViewModelのメソッドにBindすれば良いだけみたい。
<a data-bind="text: Name, click: $parent.edit"></a>

これだけで、行がBindしているModelをメソッドに渡してくれる。
クリックで起動するメソッドでは、受け取ったModelでEditビューを準備してナビゲートするだけ。

self.edit = function (fruit) {
    app.Views.Edit.setModel(fruit)
    app.navigateToEdit();
};

良い感じ!だと思います。
ajaxでやってもURLは変わらないわけで、それだってSPAと言えばSPAでしょ!なんだが、
リストのリンクをクリックしたときに、サーバーとの通信がまったくないのが大きな違いかな。
SPAはステートを持つのだ! ←辺りを「SPA」と区別して呼ぶのだろう。

silverlightで普通にやってたことができるようになった。だけのような気もするが;
あとは、この同じコードをスマホアプリ化もできれば回り道した価値もあるってもんでしょ

Written by nasu38yen

2014年6月26日 @ 7:09 PM

カテゴリー: .NET

Tagged with

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

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