Enrutador de red troncal para menú bidimensional: consejos
Soy muy principiante en backbone.js.
La navegación de mi página se ve así:
La navegación de la izquierda define cuatro tipos de vista, mientras que la navegación superior debería actualizar el modelo de datos y volver a representar la vista actual (eso es lo que tengo en mente).
Quiero permitir que el usuario marque la vista y la categoría actuales, de acuerdo con sus preferencias personales (y tal vez almacenar la configuración en el almacenamiento local del navegador).
Los dos menús se pueden usar indistintamente, lo que significa que el usuario puede decidir mostrar una vista diferente con el modelo de la categoría actual, y el usuario puede elegir una categoría diferente dentro de la vista actual.
Tengo algunos problemas para averiguar cómo debo configurar mi enrutador para esto de manera estable.
Tenga en cuenta que puede haber parámetros adicionales detrás de esta ruta, como mostrar un marcador activo en el mapa basado en un profile_id.
Ahora, tuve la idea de hacer algo como esto:
var AppRouter = Backbone.Router.extend({
routes: {
":view/:category": "aggregatefunction"
}
});
Pero no estoy muy seguro de si esto me llevará a lo que necesito.
Como quiero usar los menús indistintamente y marcarlos como favoritos, ya me quedé atascado en la creación de los enlaces.
¿Puede darme algunos consejos con respecto a la estructura y notificarme sobre posibles escollos para ayudarme en el camino?
Por supuesto, cualquier consejo adicional también es bienvenido.
Muchas Gracias
Editar
Para el bono, me gustaría leer algunas opiniones más.
Todavía tengo algunos problemas para construir y adaptar los hrefs en las etiquetas de anclaje del menú de forma dinámica, mientras que al mismo tiempo puedo activar los eventos (cambiar de categoría o cambiar de vista). Estoy buscando la solución más estable a este problema.
Acompañado con algún código por ilustración si eso fuera posible.
Gracias.
preguntado el 03 de diciembre de 13 a las 13:12
html_programmer
3 Respuestas
Hmm, creo que una forma de ver esto es que la parte más importante es la Vista y las Categorías son en realidad menos importantes, podrían considerarse como un filtro. Incluso podría tener sentido tener una Vista y ninguna Categoría (para ver 'Todos'), pero aquí solo estoy adivinando qué podría estar haciendo su aplicación...
La razón por la que digo esto es porque asumo que tendrá 4 vistas principales (mapa, transmisión en vivo, RSS, etc.) pero ninguna vista específica para esas categorías. Entonces, cuando cambias de categoría, en realidad no cambias la vista, solo la vuelves a renderizar con un parámetro diferente, ¿correcto?
Entonces, para mí, el enrutador debería ser algo como:
'map/:category': '_map'
'rss/:category': '_rss'
...
Una ruta para cada vista principal y la categoría como parámetro para la devolución de llamada. Luego, las personas pueden marcar una URL como #map/events o #rss/places_to_eat pero internamente, está administrando 4 vistas limpias.
Más adelante, será más fácil usar símbolos para permitir vistas que muestren varias categorías a la vez (los símbolos comienzan con un * en la definición de la ruta).
¡Solo mis dos centavos!
Respondido el 03 de diciembre de 13 a las 14:12
Siempre encontré que el enrutador de Backbone es horrible por esta misma razón: es unidimensional. Escribí un complemento jQuery que proporciona variables dependientes e independientes. Compruébalo en http://plugins.jquery.com/uriAnchor/. Crear una aplicación que se pueda marcar como favorita con un modelo y una vista como la que ha descrito es bastante simple con esto, aunque no perdería mi tiempo con Backbone. Déjame saber si quieres aprender más. En cualquier caso, espero que esto ayude.
Respondido el 12 de diciembre de 13 a las 02:12
Gracias por la sugerencia, lo revisaré. Backbone me atrae, ya que estoy cansado de más espaguetis. - html_programador
Me disgustan enormemente los espaguetis y utilizo una arquitectura SPA basada en pruebas. La columna vertebral simplemente se interpone en mi camino. Pero si te funciona, bien onya ;) - miguel mikowski
Basado en la respuesta + comentarios de @enders, terminé creando un modelo intermediario: aquí hay una demostración (sin mostrar una vista todavía, pero administrando el enrutamiento dinámico): http://www.zwoop.be/bb/index.php
define([
'jquery',
'underscore',
'backbone',
], function($, _, Backbone, Text, Leftnav){
var Navstate_Model = Backbone.Model.extend({
defaults: {
view: '',
category: ''
},
initialize: function(){
}
});
// Our module now returns our view
return Navstate_Model;
});
En cuanto a las rutas:
define([
'jquery',
'underscore',
'backbone',
], function($, _, Backbone){
var AppRouter = Backbone.Router.extend({
routes: {
// Define some URL routes
'': 'landing_page',
':views/:categories': 'showView',
// Default
'*actions': 'defaultAction'
},
landing_page: function(){
app.models.navstate_Model.set("view", "map");
app.models.navstate_Model.set("category", "events");
},
showView: function(view, category){
app.models.navstate_Model.set("view", view);
app.models.navstate_Model.set("category", category);
app.views.leftnav_View.render();
app.views.topnav_View.render();
console.log(view + ";" + category);
}
});
Respondido el 09 de diciembre de 13 a las 14:12
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas javascript backbone.js backbone-routing or haz tu propia pregunta.
Bien, gracias por tus comentarios. Eso suena razonable: tienes razón en que estoy usando la navegación como un "filtro". Voy a probar este enfoque esta noche y lo aceptaré mañana si todo salió bien. Ya di +1 por el enfoque. Gracias por la notificación de prever múltiples categorías más adelante. - html_programador
Gracias por su paciencia, bueno, todavía tengo algunos problemas para implementar la lógica. En el href de los menús horizontal y vertical, debo definir el URI, es decir. la ruta absoluta -> ver / splat -> categoría. Pero supongo que no hay otra forma que activar el enrutador mediante programación y construir el URI dinámicamente (es decir, obtener el símbolo actual al cambiar la vista u obtener la vista actual al cambiar la categoría)? Obviamente, no es posible utilizar los enlaces en la etiqueta href de los atributos de anclaje del menú. Gracias. - html_programador
Veo lo que quiere decir... Supuse que actualizaría los anclajes del menú en función de la situación actual (por ejemplo, si hizo clic en '#mapa', todos los enlaces en el menú superior se convertirían en #mapa/eventos, #map/fun_stuff, etc), pero ahora veo que esto puede ser poco práctico para algunos casos. Estoy de acuerdo con su solución: los 'enlaces' en el menú serían más como botones, generando una nueva ruta (basada en la ruta actual) y navegando programáticamente hacia ella, para permitir que las personas marquen la URL o tengan enlaces internos a combinaciones específicas de vistas/filtros. - Enders
Por supuesto, no necesita poner toda la lógica para generar las nuevas URL en las vistas del menú, aún podría estar en el enrutador, que podría tener un método "cambiar Vista (nueva Vista)" y "cambiar Filtros (nuevos Filtros)" , de esta manera, mantiene todos los detalles del manejo de rutas en un solo lugar. Probablemente sea obvio, pero quién sabe cuántos cafés te has tomado hoy. ;) - Enders
Me estoy rompiendo las bolas por esto, pero definitivamente vale la pena. Tengo que elegir la mejor solución para determinar esto y hacer que sea la mejor prueba posible para el futuro. El problema es que veo bastantes posibilidades en este caso. Su solución para administrar todo en el enrutador también suena muy atractiva. Además de eso, he estado pensando en crear un modelo que declare vistas y categorías y actualice el href en los menús con el motor de plantillas de guión bajo cuando cambie el modelo. Suena típicamente básico, pero no estoy seguro de si esto es excesivo. - html_programador