Knockout.js 使用durandal在我的标题中插入一些特定于当前视图的按钮

我使用Durandal框架开发了一个ASP.NET MVC解决方案

在shell页面上，我有侧栏（包含我的主菜单）和标题栏。此标题栏包含特定于当前视图的按钮

例如，如果我显示一个搜索视图，我需要在标题栏中“注入”特定的按钮，如“搜索”或“重置”按钮

另一个例子是，如果我显示一个细节视图，我需要在标题栏中“注入”特定的按钮，如“保存”或“取消”按钮

我的问题：如何在我的标题栏中“注入”一些html元素（按钮），特别是当前视图

也许我需要重构shell，以便在其他地方编写标题栏

以下是我的shell页面摘录：

<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-->

....
....
<代码> > P>这是一种你可以考虑的方法。

它假设您的每个模块都遵循一组约定。例如，可搜索模块将公开搜索功能，可保存模块将公开保存功能

有鉴于此，您可以像这样构建标题以包含按钮，并根据需要隐藏/显示它们

<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>


搜寻
重置
拯救
取消

如果您的模块公开了您提到的任何功能，则按钮将相应显示。
非常感谢，您的帮助非常宝贵。