Подмаршрутизация Durandal (Hottowel)

По сути, я пытаюсь создать меню внутри меню. Таким образом, в маршруте главного меню будет вертикальное меню с другим набором маршрутов. При нажатии на маршруты подменю обновляется только часть страницы, а вертикальное меню не перезагружается. Я предполагаю, что это будет похоже на эту скрипку KO http://jsfiddle.net/dPCjM/, но потребуется другой набор "призрачных" директив КО в виде основного маршрута:

 <!--ko compose: {model: router.activeItem, 
            afterCompose: router.afterCompose, 
            transition: 'entrance'} -->
 <!--/ko-->

и некоторые другие конфиги на роутере Durandal...

РЕДАКТИРОВАТЬ: И чтобы уточнить, я не пытаюсь создать раскрывающийся список в одном из пунктов главного меню. Я пытаюсь создать меню внутри одного из представлений. По сути, приложение Durandal внутри приложения Durandal :)

ИНФРАММЫ?? :))))))))))


person LastTribunal    schedule 04.04.2013    source источник
comment
Вы хотите, чтобы подменю поддерживало прямые ссылки и влияло на стек истории браузера?   -  person Evan Larsen    schedule 04.04.2013
comment
Это было бы бонусом   -  person LastTribunal    schedule 04.04.2013
comment
Это хороший вопрос, у меня тоже есть потребность в этом.   -  person Alexander Preston    schedule 04.04.2013
comment
Это можно сделать, я представлю пример сегодня вечером   -  person Evan Larsen    schedule 04.04.2013


Ответы (2)


РЕДАКТИРОВАТЬ

Начиная с Durandal.js 2.0 плагин маршрутизатора теперь имеет встроенный дочерний маршрутизатор, который позволяет выполнять прямые ссылки из коробка.

/Редактировать

Приведенный ниже ответ относится к Durandal 1.2

Плагин durandal router — это оболочка для sammyjs.

Плагин маршрутизатора позволяет вам управлять стеком истории браузера, а также дает вашему спа возможность ссылаться на страницы с вашим спа.

Это довольно легко сделать, связывая 1 уровень в глубину, где у вас есть 1 главное меню и страницы, которые меняются местами. Но что, если вы хотите иметь подменю с главным меню и предоставить глубокие ссылки.

Когда маршрутизатор поставлен в очередь на обмен представлениями, активатор модели представления сначала проверяет, соответствует ли запрос для той же страницы в вашей модели представления. Если это тот же вид, вы можете отменить маршрут до того, как это произойдет. Отменяя маршрут, когда он вызывает ту же страницу, это позволяет вам взять параметры маршрута и самостоятельно обработать подмаршрут.

Метод, который проверяет, вызывает ли он ту же страницу, находится в модели представления с именем areSameItem. Вы можете переопределить этот метод внутри вашей основной модели представления, вызвав:

return App = {
  router: router,
  subPage: ko.observable('defaultSubPage'),
  activate: function () {
     router.activeItem.settings.areSameItem = function (currentItem, newItem, data) {
        if (currentItem != newItem) { return false; }
        else { App.subPage(convertSplatToModuleId(data.splat)); return true; }
     }
  }
}

Конечно, это внутри модуля amd, а router — это подключаемый модуль маршрутизатора Durandal. convertSplatToModuleId — это функция, которая принимает свойство splat, которое представляет собой значения маршрута, и преобразует его в модуль подстраницы, которую вы хотите отобразить.

Итак, эта часть была легкой, но есть еще 1 вещь, которую нужно сделать.

<div data-bind="compose: { model: subPage, afterCompose: router.afterCompose }"></div>

Ваша привязка для контейнера подстраниц должна вызывать router.afterCompose, потому что это то, что сообщает маршрутизатору, что маршрут завершен и он готов обрабатывать новые маршруты.

Это непростая задача для объяснения. Итак, я создал пример и отправил его на github здесь.

person Evan Larsen    schedule 04.04.2013
comment
Я почти в слезах. Я эмулировал это со всеми видами вызовов jquery и создал большой беспорядок в процессе. Жаль, что я не спросил намного раньше.. - person LastTribunal; 05.04.2013

В качестве предупреждения для тех, кто заинтересован, предстоящий выпуск Durandal js 2.0 содержит функции для диплинков, которые значительно упрощают работу по сравнению с вашими собственными диплинками, основанными на прекрасном примере Эвана.

Ознакомьтесь с образцом Knockout, чтобы увидеть его в действии. двоичные файлы через проект Durandal js github.

Следует отметить, что это существенный отход от предыдущей версии Durandal, поэтому вам придется внести некоторые изменения в исходный шаблон HotTowel, чтобы поддерживать его, поскольку в него внесены многочисленные критические изменения.

person Denis Pitcher    schedule 23.07.2013
comment
Спасибо, Денис, у меня не было времени изучить версию 2.0, но мне было интересно узнать о ее новом маршрутизаторе. Приятно знать, что он поддерживает глубокие ссылки из коробки. Я не могу дождаться, чтобы играть с v2. :) - person Evan Larsen; 02.08.2013