cross-browser - una - ver historial de ubicaciones google maps
Biblioteca de administración de historial de ubicación/hashchange todo en uno (7)
PJAX es el proceso que estás describiendo.
Las técnicas más avanzadas de pjax incluso comenzarán a precargar el contenido cuando el usuario pase el mouse por encima del enlace.
Esta es una buena biblioteca de pjax. https://github.com/MoOx/pjax
Marque los contenedores que se actualizarán en las siguientes solicitudes:
new Pjax({ selectors: ["title", ".my-Header", ".my-Content", ".my-Sidebar"] })
Así que en lo anterior, solo el title , el .my-header , .my-content y .my-sidebar serán reemplazados por el contenido de la llamada ajax.
Algo a lo que prestarle atención
Preste atención a cómo se carga su JS y detecta cuando la página está lista. El javascript no se volverá a cargar en las páginas nuevas. También preste atención a cuándo se llama a cualquier llamada analítica, por la misma razón.
En primer lugar, sé que hay bibliotecas que proporcionan polyfills para location.pushState / popState ( History.js , Hash.js , jQuery hashchange ), así que no se limiten a vincularlas.
Necesito una biblioteca más poderosa para lograr lo siguiente en un RIA:
- El usuario hace clic en un enlace
- la biblioteca es notificada y carga contexto a través de Ajax (¡sin recarga completa!)
- Todos los elementos
<a>se aprovechan con un manejador de clics que- previene recargas de página en 2. (
preventDefault) y - llama a
location.pushStatelugar / establece location.hash para navegadores antiguos
- previene recargas de página en 2. (
- contenido cargado se inserta en la página y reemplaza el contenido actual
- Continúa con 1.
Además, el contenido previamente cargado debe restaurarse a medida que el usuario navega hacia atrás.
Como ejemplo, haga Google+ en Google+ en Internet Explorer <10 y en cualquier otro navegador.
¿Hay algo que se acerque incluso? Necesito soporte para IE8, FF10, Safari 5 y Chrome 18. Además, debe tener una licencia permisiva como MIT o Apache.
Varias sugerencias
- ExtJs , vea su ejemplo de historia , y aquí están los documentos .
- YUI Browser History Manager .
- jQuery BBQ parece proporcionar un conjunto de características más avanzado sobre jQuery.hashcode.
- ReallySimpleHistory también puede ser de ayuda, aunque es bastante viejo y posiblemente anticuado.
Nota: ExtJs History se ha ampliado para optimizar las llamadas duplicadas (redundantes) a add() .
¿Ha mirado la muestra de BigShelf SPA (aplicación de página única) de Microsoft? Parece que cubre cómo lograr la mayor parte de lo que estás pidiendo.
Hace uso de History.js, un objeto envoltorio personalizado para controlar fácilmente la navegación llamada NavHistory y Knockout.js para el manejo de clics.
Aquí hay un flujo de trabajo extremadamente abreviado de cómo funciona esto: primero tendrá que inicializar un objeto NavHistory que envuelva history.js y registre una devolución de llamada que se ejecuta cuando hay un estado de inserción o cambio de hash:
var nav = new NavHistory({
params: { page: 1, filter: "all", ... etc ... },
onNavigate: function (navEntry) {
// Respond to the incoming sort/page/filter parameters
// by updating booksDataSource and re-querying the server
}
});
A continuación, definirá uno o más modelos de vista de Knockout.js con comandos que pueden vincularse a botones de enlaces, etc.
var ViewModel = function (nav) {
this.search = function () {
nav.navigate({ page: 2, filter: '''', ... }); // JSON object matching the NavHistory params
};
}
Finalmente, en su marcado, usará Knockout.js para unir sus comandos a varios elementos:
<a data-bind="click: search">...</a>
Los recursos vinculados son mucho más detallados al explicar cómo funciona todo esto. Desafortunadamente, no es un marco único como el que está buscando, pero se sorprendería de lo fácil que es hacerlo funcionar.
Una cosa más, siguiendo el ejemplo de BigShelf, el sitio que estoy construyendo es completamente compatible con varios navegadores, IE6 +, Firefox, Safari (móvil y de escritorio) y Chrome (móvil y de escritorio).
Actualmente uso PathJS en una de mis aplicaciones. Ha sido la mejor decisión que he tomado. Para su caso de uso particular, eche un vistazo al Ejemplo HTML5 .
La pieza de código que hace que el ejemplo funcione (desde la fuente):
<script type="text/javascript">
// This example makes use of the jQuery library.
// You can use any methods as actions in PathJS. You can define them as I do below,
// assign them to variables, or use anonymous functions. The choice is yours.
function notFound(){
$("#output .content").html("404 Not Found");
$("#output .content").addClass("error");
}
function setPageBackground(){
$("#output .content").removeClass("error");
}
// Here we define our routes. You''ll notice that I only define three routes, even
// though there are four links. Each route has an action assigned to it (via the
// `to` method, as well as an `enter` method. The `enter` method is called before
// the route is performed, which allows you to do any setup you need (changes classes,
// performing AJAX calls, adding animations, etc.
Path.map("/users").to(function(){
$("#output .content").html("Users");
}).enter(setPageBackground);
Path.map("/about").to(function(){
$("#output .content").html("About");
}).enter(setPageBackground);
Path.map("/contact").to(function(){
$("#output .content").html("Contact");
}).enter(setPageBackground);
// The `Path.rescue()` method takes a function as an argument, and will be called when
// a route is activated that you have not yet defined an action for. On this example
// page, you''ll notice there is no defined route for the "Unicorns!?" link. Since no
// route is defined, it calls this method instead.
Path.rescue(notFound);
$(document).ready(function(){
// This line is used to start the HTML5 PathJS listener. This will modify the
// `window.onpopstate` method accordingly, check that HTML5 is supported, and
// fall back to hashtags if you tell it to. Calling it with no arguments will
// cause it to do nothing if HTML5 is not supported
Path.history.listen();
// If you would like it to gracefully fallback to Hashtags in the event that HTML5
// isn''t supported, just pass `true` into the method.
// Path.history.listen(true);
$("a").click(function(event){
event.preventDefault();
// To make use of the HTML5 History API, you need to tell your click events to
// add to the history stack by calling the `Path.history.pushState` method. This
// method is analogous to the regular `window.history.pushState` method, but
// wraps calls to it around the PathJS dispatched. Conveniently, you''ll still have
// access to any state data you assign to it as if you had manually set it via
// the standard methods.
Path.history.pushState({}, "", $(this).attr("href"));
});
});
</script>
PathJS tiene algunas de las características más buscadas de una biblioteca de enrutamiento:
- Ligero
- Admite la API de historial HTML5, el método ''onhashchange'' y la elegante degradación
- Admite rutas raíz, métodos de rescate, rutas paramaterizadas, componentes de rutas opcionales (rutas dinámicas) y Programación Orientada a Aspectos
- Bien probado (pruebas disponibles en el directorio ./tests)
- Compatible con todos los principales navegadores (probado en Firefox 3.6, Firefox 4.0, Firefox 5.0, Chrome 9, Opera 11, IE7, IE8, IE9)
- Independiente de todas las bibliotecas de terceros, pero juega bien con todos ellos
Encontré los últimos puntos más atractivos. Puedes encontrarlos here
Espero que encuentres esto útil.
Creo que Sammy.js ( http://sammyjs.org ) (con licencia del MIT) tiene el mejor enfoque en lo que quiere hacer, con sus 2 pilares principales:
- Rutas
- Eventos
Podría citar de los documentos, pero es bastante sencillo:
configure las rutas del cliente que se relacionan con cosas que se deben hacer, por ejemplo: actualice la vista a través de ajax
vincular eventos para llamar a rutas, por ejemplo: llamar a la ruta anterior cuando hago clic en un enlace. (Debería asegurarse de que se invoque e.preventDefault en el evento definido, creo, ya que esta es una decisión de la aplicación en realidad, por lo que no puede ser eliminada por ninguna biblioteca que vaya a usar en absoluto)
Algunos documentos relevantes
Ejemplo de una ruta: (desde http://sammyjs.org/docs/tutorials/json_store_1 )
this.get(''#/'', function(context) {
$.ajax({
url: ''data/items.json'',
dataType: ''json'',
success: function(items) {
$.each(items, function(i, item) {
context.log(item.title, ''-'', item.artist);
});
}
});
});
O algo así como
this.get(''#/'', function(context) {
context.app.swap(''''); ///the ''swap'' here indicates a cleaning of the view
//before partials are loaded, effectively rerendering the entire screen. NOt doing the swap enables you to do infinite-scrolling / appending style, etc.
// ...
});
Por supuesto, otros frameworks MVC también podrían ser una opción, lo que le quitaría aún más plomería, pero podría ser excesivo en esta situación.
una comparación bastante buena (y aún bastante reciente):
http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/ (yo uso Spine.js yo mismo).
Por último, pensé que podría ser útil incluir una respuesta que escribí hace un tiempo que detalla todas las mejores prácticas (como yo las veo) en renovaciones del lado del cliente, etc. Tal vez lo encuentres útil:
La AjaxTCR Library parece cubrir todas las bases y contiene métodos robustos que no he visto antes. Se lanzó bajo una licencia BSD ( Open Source Initiative ).
Por ejemplo, aquí hay cinco AjaxTCR.history(); métodos:
init (onStateChangeCallback, initState);
addToHistory (id, data, title, url, options);
obtener toda();
getPosition ();
enableBackGuard (mensaje, inmediato);
El addToHistory(); tiene suficientes parámetros para permitir enlaces de hash profundos en sitios web.
Más llamativo de .com.cookie () , .storage () y .template () proporciona métodos más que suficientes para manejar los requisitos de datos de sesión .
¡La bien documentada página web API AjaxTCR tiene una gran cantidad de información con documentos descargables para arrancar!
Actualización de estado:
Ese sitio web también tiene una sección de ejemplos de página web que incluye archivos .zip descargables con archivos de proyecto frontales ( cliente ) y back-end ( servidor ) listos para usar.
Notablemente son los siguientes ejemplos listos para usar :
Cookie de un solo sentido
HttpOnly Cookies
Historia de robo
Explorador de historia
Hay muchos otros ejemplos que redondean el proceso para usar muchos de sus métodos API, lo que hace que cualquier curva de aprendizaje sea más rápida de completar.
Me gustaría sugerir una combinación de
crossroads.js como enrutador http://millermedeiros.github.com/crossroads.js/
y hasher para manejar el historial del navegador y las direcciones hash (con un montón de soluciones alternativas): https://github.com/millermedeiros/hasher/ (basado en http://millermedeiros.github.com/js-signals/ )
Esto aún requerirá algunas líneas de código (para cargar contenido ajax, etc.), pero le dará muchas y muchas otras posibilidades cuando maneje una ruta.
Aquí hay un ejemplo usando jQuery (ninguna de las bibliotecas anteriores requiere jQuery, solo soy flojo ...)
http://fiddle.jshell.net/Fe5Kz/2/show/light
HTML
<ul id="menu">
<li>
<a href="foo">foo</a>
</li>
<li>
<a href="bar/baz">bar/baz</a>
</li>
</ul>
<div id="content"></div>
JS
//register routes
crossroads.addRoute(''foo'', function() {
$(''#content'').html(''this could be ajax loaded content or whatever'');
});
crossroads.addRoute(''bar/{baz}'', function(baz) {
//maybe do something with the parameter ...
//$(''#content'').load(''ajax_url?baz=''+baz, function(){
// $(''#content'').html(''bar route called with parameter '' + baz);
//});
$(''#content'').html(''bar route called with parameter '' + baz);
});
//setup hash handling
function parseHash(newHash, oldHash) {
crossroads.parse(newHash);
}
hasher.initialized.add(parseHash);
hasher.changed.add(parseHash);
hasher.init();
//add click listener to menu items
$(''#menu li a'').on(''click'', function(e) {
e.preventDefault();
$(''#menu a'').removeClass(''active'');
$(this).addClass(''active'');
hasher.setHash($(this).attr(''href''));
});