0

私はモバイルユーザーを対象とした単一ページのWebサイトに取り組んでいます（最終的にはPhonegapに移植される予定です）。画面を「カード」に分割しました。これは基本的に<div>、必要に応じて表示/初期化/非表示にしているだけです。

現在、これらのパネルを一貫したアプリにリンクすることを実装するために使用する適切な構造を決定するのに苦労しています。私の現在の実装は次のようになります（私が精通しているので、現在Knockoutを使用しています）：

//Javascript
var LoginCard = function() {
    this.goToRegister = function() { 
        // IF registerCard is not initialized
        // THEN ko.applyBindings(new RegisterCard(), document.getElementById('registerCard'));
        // ELSE $('#registerCard').show();
    };
    this.doLogin = function() { /* Goes to home card after login */ };
}
var RegisterCard = function() {
    this.goToLogin = function() { /* Goes back to login card */ };
    this.doRegister = function() { /* Goes to login card after reg */ };
}
ko.applyBindings(new LoginCard(), document.getElementById('loginCard'));

//HTML
<div id="loginCard">
    <button data-bind="click: goToRegister" id="btnReg">Register Account</button>
    <button data-bind="click: doLogin" id="btnLogin">Login</button>
</div>
<div id="registerCard">
    <button data-bind="click: goToLogin" id="btnBackToLogin">Back To Login</button>
    <button data-bind="click: doRegister" id="btnDoReg">Submit Registration</button>
</div>

ご覧のとおり、リンクはビューモデル自体の内部で行われるため、さまざまなビューモデル（loginCard、registerCard、homeCardなど）は互いに緊密に結合されます。

より「低レベル」の代替手段は、jQueryを使用してボタンイベントをバインドすることです。これにより、各カードは他のカードに関する詳細を知る必要がなくなります。

//But this means I have to specify a ton of unique IDs for all the elements in the page.
$('#btnReg').click(function() { /* Initialize and go to registerCard. */ });

また、hash-routing / pushStateを使用することも考えたので、クリックイベントが各ビューモデル内にある間、知っておく必要があるのは、アクセスするURLだけですか。何かのようなもの：

var LoginCard = function() {
    this.goToRegister = function() { 
        window.location.hash = 'register';
        //or history.pushState('state', '', 'register';
    };
}

シングルページアプリケーションを作成するのはこれが初めてなので、デザインの選択について本当に混乱しています。どちらが良いですか、または誰かがこれに関して行くための標準的な方法を提案できますか？

4

1 に答える 1

1

SammyJSやCrossroadsJSなどのルーティングライブラリに依存するルーティング用の別のオブジェクトを作成することをお勧めします。

私の趣味のプロジェクトであるMyStory.Spaを参照してください。これは、ブラウザーレベルのルーティングにSammyJSを使用しているシングルページアプリケーションスタイルのWeb（モバイルアプリ用ではありません）でもあります。MyStory.Spaアーキテクチャでは、webapp / app / infra / router.jsがルーティングの役割を果たし、ルーティング、ビュー、ビューモデルに関する詳細情報は/webapp/app/infra/routing.table.jsにあります。

このようにして、View、ViewModel、Model、Data Service、Routingなどを分離できます。

于 2012-11-28T08:45:05.797 に答える