1

Durandalフレームワークを使用してASP.NETMVCソリューションを開発します。

シェルページには、サイドバー（メインメニューが含まれています）とヘッダーバーがあります。このヘッダーバーには、現在のビューに固有のボタンが含まれています。

したがって、たとえば、検索ビューを表示する場合は、「検索」ボタンや「リセット」ボタンなど、ヘッダーバーに特定のボタンを「挿入」する必要があります。

別の例として、詳細ビューを表示する場合は、「保存」ボタンや「キャンセル」ボタンなど、ヘッダーバーに特定のボタンを「挿入」する必要があります。

私の質問：現在のビュー専用のヘッダーバーにいくつかのhtml要素（ボタン）を「挿入」できるようにするにはどうすればよいですか？

ヘッダーバーを別の場所にコーディングするために、シェルをリファクタリングする必要があるかもしれません。

以下は私のシェルページの抜粋です：

<div class="page secondary with-sidebar">
    <div id="header">
         ....
    </div> <!--header-->

    <div class="page-sidebar">
         ....
    </div>
    <div class="page-region">
        <div class="page-region-content">

            <div class="grid">   
                <div class="row">
                        <div class="container-fluid page-host">
                            <!--ko compose: { 
                                model: router.activeItem, //wiring the router
                                afterCompose: router.afterCompose, //wiring the router
                                transition:'fade', //use the 'fade' transition when switching views
                                cacheViews:true //telling composition to keep views in the dom, and reuse them (only a good idea with singleton view models)
                            }--><!--/ko-->
                        </div>
                </div>
            </div> <!--grid-->   
        </div> <!--page-region-content-->
    </div> <!--page-region-->
</div> <!--page secondary-->
4

1 に答える 1

2

これがあなたが考えることができる1つのアプローチです。

各モジュールが一連の規則に従っていることを前提としています。たとえば、検索可能なモジュールは検索機能を公開し、保存可能なモジュールは保存機能を公開します。

それを前提として、このようにヘッダーを作成してボタンを含め、必要に応じてボタンを非表示/表示することができます。

<div id="header">

    <!-- other header content -->

    <!-- injected header buttons -->

    <!-- will only be shown if the activeItem has a search function -->
    <button data-bind="visible: router.activeItem().search, 
                       click: router.activeItem().search">Search</button>

    <!-- will only be shown if the activeItem has a resetfunction -->
    <button data-bind="visible: router.activeItem().reset, 
                       click: router.activeItem().reset">Reset</button>

    <!-- will only be shown if the activeItem has a save function -->
    <button data-bind="visible: router.activeItem().save, 
                       click: router.activeItem().save">Save</button>

    <!-- will only be shown if the activeItem has a cancel function -->
    <button data-bind="visible: router.activeItem().cancel, 
                       click: router.activeItem().cancel">Cancel</button>
</div>

モジュールがあなたが言及した機能のいずれかを公開している場合、ボタンはそれに応じて表示されます。

于 2013-03-23T16:44:16.793 に答える