Backbone.jsでレイアウトをレンダリングします

StackOverflow https://stackoverflow.com/questions/4309954

  •  29-09-2019
  •  | 
  •  

質問

Backbone.jsとjQueryを使用して単一のページWebアプリケーション（SPWA）を構築した場合、それぞれが一意のページレイアウトを必要とする2つのコントローラーを使用した場合、レイアウトをどのようにレンダリングしますか？

  • Controlleraは3列のレイアウトです。
  • ControllerBは2列のレイアウトです。
  • デフォルトのルートは、controllera.welcome（）をアクティブにします - 初期レンダリング。
  • 両方のコントローラーには、すべてのbackbone.jsモデル/ビューの良さを活用する列内でレンダリングされたさまざまなビューがあります。

問題

ユーザーがControllerBにマッピングされたルートを要求すると、ページレイアウト全体を変更する必要があります。これにより、Controlleraのレイアウトを非表示にし、ControllerBのレイアウトを表示します。または、レイアウトがまだDOMにない場合はレイアウトをレンダリングします。

私の最初の考え

BackBone.jsビューを使用してレイアウトをレンダリングしてから、各列をモデルバウンドビューでレンダリングしますか？

私の二度目の考え

jQueryを使用してレイアウトをレンダリングし、ルートに責任を負わせるアクションを実行するセットアップ/レイアウトメソッドをコントローラーに追加しますか？コントローラー内でjQueryを使用すると、私には少し気分が悪くなりますが、コントローラーがルートに対して適切なレイアウトが表示されるように責任を負わせることを望んでいます。

これが私の考え直しのためのスニペットです：

var Controller = Backbone.Controller.extend
({
    routes :
    {
       "" : "welcome" // default action
    }
    /** Constructor **/
    ,initialize: function(options)
    {
        console.log('Workspace initialized');               
    }
    // LAYOUT
    ,renderLayout : function ()
    {
        console.log('Rendering Layout.');
        var $ = window.$;
        var layout = require('js/layout/app/big_menu');
        $(layout.parent).html(layout.html);
    }
    // ACTIONS
    /** Default Action **/
    ,welcome : function ()
    {
        this.renderLayout();
        console.log('Do the whole model/view thing...');
    }
});

ありがとうございました

時間を割いてくれてありがとう。それは有り難いです！

役に立ちましたか？

解決

アプリケーションのスケルトンをすでにページに配置したいと思っています。そのため、ページ上に異なる要素が付いた完全なレイアウトがあり、それらの要素に対してバックボーンビューを作成して、それらが正しくレイアウトされるようにします。

これは、単一のレイアウトがあるときにうまく機能します。複数のレイアウトがあると物事は楽しくなります。すべてのレイアウトをページに配置し、ロジックに応じてさまざまな構成を非表示にすることができます。レイアウトが階層の最初のビューであることがわかります。そのため、レイアウトをレンダリングしてから、ビューがロードされます。

これを行う本当の方法はありません。それぞれに長所と短所があります。私がしないことの1つは、コントローラーでレイアウトをレンダリングすることです。すべてのレンダリングとHTMLをビューに配置して、コントローラーとモデルのロジックに対処できるようにします（MVCはこちらで考えてください）。

他のヒント

私はジュリアンに同意する傾向があります - あなたのレイアウトを可能な限りステートレスに保つのは素晴らしいことです。少なくともすべてがスケルトンの形で常にページに配置されています。特定のレイアウトまたは構成を表示する必要がある場合、その内容を怠lazにレンダリングし、UIのその部分をCSSで表示します。相互に存在するCSSクラスは、「プロジェクトオープン」、「ドキュメントオープン」、「メモオープン」など、これに役立ちます。

backbone.jsを使用してモジュールベースのイントラネットシステムを設計しています。基本的に、ドキュメントロードで次のアルゴリズムを使用しています。

  • アプリのシングルトンコントローラーであるAppControllerを作成します。
  • AppControllerはMainViewを作成します。これは、ページのスケルトンをレンダリングし、ページ上の永続的なアイテムのクリックを処理する責任があるビューです（ログイン/ログアウトボタンなど）
  • MainViewは、ページのさまざまな部分、ナビゲーション、パン粉、ヘッダー、ツールバー、ContentContainerなどの多くのチャイルドビューを作成します。これらはアプリケーションの備品であり、それぞれのコンテンツは変更しません。特にContentareaには、任意のレイアウトを含めることができます。
  • AppControllerは登録されたモジュールを通過し、それぞれのMainModuleControllerを開始します。これらにはすべて、名前空間ルーティングスキーマがあります。
  • backbone.history.start（）

ModuleControllersはすべて、INITのAppControllerにアクセスします。ハッシュロケーションをキャッチするとき、彼らはページマニフェストオブジェクトを含むAppControllerにPageChangeイベントを送信します。 PageManifestオブジェクトには、パン粉情報、ヘッダー情報、そして最も重要なことには、インスタンス化されたContentViewへの参照など、それぞれのビューを設定するために必要なすべての情報が含まれています。 AppControllerは、PageManifestの情報を使用して、さまざまな永続的なビューをセットアップし、ContentContainerの以前のContentViewを削除し、モジュールによって提供されたコンテナにコンテナにコンテンツビューを挿入します。

このようにして、さまざまなデザイナーがさまざまなモジュールで作業することができ、彼らが知っておく必要があるのは、PageManifestオブジェクトの仕様とContentViewがどのように見えるかだけです。独自の複雑なルーティングシステムをセットアップし、独自のモデルとカスタマイズされたContentViewsを使用できます（ただし、継承するListViews、ObjectViewsなどのライブラリを用意する予定です）。

私たちは現在設計段階にいるので、これが最終的に使用するデザインであるか、穴が見つからないことを保証することはできませんが、概念的には、それは健全だと思います。コメント？

バックボーンやその他のJSフレームワーク/ライブラリに関係なく、まったく同じ問題を抱えています。

単一の列レイアウトを必要とするフォームビューのサインインフォームビューがあると想像してください。

その後、正常にサインインすると、どういうわけか別のレイアウトがレンダリングされます（ヘッダーゾーン、フッターゾーン、左ゾーン、その後メインゾーン（右列）が他のすべてのメインゾーン（右列）を使用します。

ヘッダーには、ロゴビュー（機能がある場合）とグローバル/ユーザーメニュービューが含まれる場合があります。左ゾーンには、プライマリナビゲーションビューが含まれます。

その後、さらに複雑です。プライマリNAVビュー内の各リンクは、新しいサブレイアウトにロードされ、さらにビューを注入する準備ができています。

通常のコントローラー/ビューが、現在レイアウトがレンダリングされているものを気にしたくないのですが、そのコンテナ要素が存在し、注入する準備ができています。

私は（伝統的な意味ではなく）ルートを巧妙な方法で使用することを考えました。

function LayoutController() {
App.addRouteMatcher("/sign_in/*", this.renderSignInLayout); // single column
App.addRouteMatcher("regex to represent anything but sign_in", this.renderMainLayout); // header, footer, primary nav, main zone
App.addRouteMatcher("/section1/*", this.renderSubLayoutForSection1); // puts a 1 column layout in the main zone
App.addRouteMatcher("/section2/*", this.renderSubLayoutForSection2); // puts a 2 column layout in the main zone 
}

ルートが「/section1/whation/sub/page/内/1セクション/1」の場合、sign_in "と「/section1/*」以外のものを表す2つのルートマッチャー「regex」は両方とも実行されます。レイアウトがレンダリングされ、その後、セクション1サブレイアウトが理にかなっている場合にレンダリングされます。

その後、他のすべての通常のコントローラーは、従来の意味でルートを使用します。

レイアウトを管理し、それらのレイアウト、サブレイアウト、ビューが安全に取り壊されることを保証するための優れた方法が必要です。

エレガントなものをデザインして実装した人を聞きたいです。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top