ピースペース

SPA: viewの切替え

leave a comment »

MVC5 SPA TemplateにViewを追加して、_Homeとそれを切り替えるにはどうするの?
http://blogs.msdn.com/b/tsmatsuz/archive/2013/11/07/knockout-js-multiple-view-change-using-with-and-computed.aspx
新しいTemplateを使って開始したSPAで、松崎さんのこのエレガントな方法を使用する方法がわからない。
このtemplateのAppViewmodelにそれが組み込まれているのかどうか?
は、半分できてて未完成。みたいな。
app.viewプロパティが定義されているのに、その意味も、役割の説明も、使用されている箇所もない!
たぶんおそらく、これの役割はcurrentViewだと思う。

HomeViewがBindするapp.homeはko.computedで定義されているのに、
なぜか必ず、return app.Views.Home するようになっている。
これを、app.viewを判定して、app.view != app.Views.Homeのときはnullを応答するように、
↓を追加する。
if (self.view() !== self.Views[options.name]) return null;

これで、例えばHogeViewを追加して、HogeViewModelの中で、

Sammy(function () {
        this.get(‘#hoge’, function () {
            app.view(app.Views.Hoge);
        });
    });

としておいて、navigateToHoge()をすれば、ViewはHome→Hogeに切り替わるようになる。 
(Homeが非表示になり、Hogeの表示が復活する)
Viewの切替はこれでOK。

ただ、SPAページがLoadされた時点でappインスタンスは未だない。ので、
SPAページに含まれるViewが一瞬全部表示されて見える。
は、SPAの外側(jqueryでdom操作をして)でコントロールする。

Written by nasu38yen

2014年6月10日 @ 3:43 PM

カテゴリー: 未分類

Tagged with

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

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