Добавьте некоторые кнопки в мой заголовок, относящиеся к текущему представлению, с помощью Durandal.

Я разрабатываю решение ASP.NET MVC с помощью Durandal framework.

На странице оболочки у меня есть боковая панель (которая содержит мое главное меню), а также панель заголовка. Эта панель заголовка содержит кнопку, относящуюся к текущему представлению.

Так, например, если я показываю представление поиска, мне нужно «вставить» определенную кнопку в панель заголовка, например кнопки «Поиск» или «Сброс».

Другой пример: если я отображаю подробное представление, мне нужно «вставить» определенную кнопку в панель заголовка, например, кнопки «Сохранить» или «Отмена».

Мой вопрос: как действовать, чтобы иметь возможность «вставлять» некоторые 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-->

knockout.js durandal hottowel
person Bronzato    schedule 22.03.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вот один из подходов, который вы могли бы рассмотреть.

Предполагается, что каждый из ваших модулей следует ряду соглашений. Например, модуль с возможностью поиска предоставит функцию поиска, а модуль с возможностью сохранения предоставит функцию сохранения.

Учитывая это, вы можете построить свой заголовок таким образом, чтобы он содержал кнопки и скрывать/показывать их по мере необходимости.

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

Если ваши модули предоставляют какие-либо функции, которые вы упомянули, кнопки будут отображаться соответственно.

person Alexander Preston    schedule 23.03.2013
comment
Большое спасибо, ваша помощь была бесценна. - person Bronzato; 24.03.2013