knockout.js - Durandal Subrouting(Hottowel)

Question

Básicamente, estoy tratando de crear un menú dentro de un menú. Entonces, dentro de una ruta de menú principal, habrá un menú vertical con otro conjunto de rutas. Al hacer clic en las rutas del submenú, solo se actualiza una parte de la página y el menú vertical no se vuelve a cargar. Supongo que sería similar a este violín KO http://jsfiddle.net/dPCjM/ , pero necesitaría otro conjunto de directivas KO "fantasmas" en una vista de ruta principal:

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

y algunas otras configuraciones en el enrutador durandal ...

EDITAR: Y para aclarar, no estoy tratando de crear un menú desplegable en uno de los elementos del menú principal. Estoy tratando de crear un menú dentro de una de las vistas. Básicamente una aplicación durandal dentro de una aplicación durandal :)

¿IFRAMES? :))))))))))

Answer 1

Justo como un aviso para los interesados, la próxima versión de Durandal js 2.0 incluye características para enlaces profundos que simplifican enormemente las cosas más que su propio enlace profundo basado en el excelente ejemplo de Evan.

Consulte la muestra Knockout para verla en acción, que puede obtener de los últimos binarios a través del proyecto Durandal js github .

Cabe destacar que es una desviación sustancial de la versión anterior de Durandal, por lo que tendrá que hacer algunas modificaciones a la plantilla original de HotTowel para que sea compatible, ya que hay numerosos cambios importantes.

Answer 2

EDITAR

A partir de Durandal.js 2.0, el plug-in del enrutador ahora tiene un enrutador para niños integrado que permite el deeplinking out of the box.

/Editar

La respuesta a continuación se aplica a durandal 1.2

El plugin de enrutador durandal es una envoltura alrededor de sammyjs .

El plugin del enrutador le permite controlar la pila del historial del navegador y también le da a su spa la capacidad de enlazar con páginas w / en su spa.

Es bastante fácil hacer que enlace 1 nivel de profundidad donde tienes 1 menú principal y páginas que se intercambian. Pero, ¿y si quisieras tener un submenú con el menú principal y proporcionar enlaces profundos ?

Cuando el enrutador se pone en cola para intercambiar puntos de vista, el activador viewmodel primero verifica si la solicitud es para la misma página en su modelo de vista. Si es la misma vista, puede cancelar la ruta antes de que suceda. Al cancelar la ruta cuando llama a la misma página, esto le permite tomar los parámetros de la ruta y manejar la subrutada usted mismo.

El método que verifica si está llamando a la misma página está en el modelo de vista denominado areSameItem . Puede anular este método dentro de su modelo de vista principal llamando a:

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

Por supuesto, esto está dentro de un módulo amd y el router es el complemento del enrutador durandal. convertSplatToModuleId es una función que toma la propiedad splat , que es el valor de la ruta, y la convierte al módulo de la página secundaria que desea mostrar.

Entonces, esa parte fue fácil, pero hay una cosa más que hay que hacer.

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

Su enlace para el contenedor de las subpáginas necesita llamar a router.afterCompose porque esto es lo que le dice al enrutador que la ruta se ha completado y está lista para manejar nuevas rutas.

Esta no es una tarea fácil de explicar. Entonces, creé un ejemplo y lo empujé a github aquí .