2012-01-17 36 views
27

Estoy utilizando la red troncal para compilar mi aplicación web.Cómo actualizar una página en una aplicación de red troncal

Actualmente estoy enfrentando un problema por el cual si estoy en la página de inicio, no puedo actualizar la misma página simplemente haciendo clic en el botón "inicio" nuevamente.

Creo que esta es la limitación que establece la columna vertebral (no vuelve a cargar la página si el mismo se llama URL)

enter image description here

¿Hay alguna forma de evitar esto? ¿Para que pueda activar una recarga de página cuando hago clic nuevamente en el botón de inicio, es decir, vuelvo a llamar a la misma URL?

Respuesta

27

En cuanto a la fuente backbone.js, parece que esto no es posible de forma predeterminada, ya que solo responde a un cambio de URL. Y como hace clic en el mismo enlace, no activará un evento de cambio.

Código

en Backbone.History:

$(window).bind('hashchange', this.checkUrl); 

Tendrá que manejar un no cambie usted mismo. Esto es lo que hice:

$('.nav-links').click(function(e) { 
    var newFragment = Backbone.history.getFragment($(this).attr('href')); 
    if (Backbone.history.fragment == newFragment) { 
     // need to null out Backbone.history.fragement because 
     // navigate method will ignore when it is the same as newFragment 
     Backbone.history.fragment = null; 
     Backbone.history.navigate(newFragment, true); 
    } 
}); 
+0

Después de crear una algunas aplicaciones, encontré que a veces es mejor/más claro tener un botón de actualización que implementar esta solución. –

+4

No sé si esta respuesta fue correcta alguna vez, pero ya no es así. 'Backbone.history.loadUrl' hace exactamente lo que se necesita, ver mi respuesta. – amiuhle

0

Esto no está en la espina dorsal. Lo mismo funciona bien en Chrome (navegadores webkit), pero no en Firefox. Es un comportamiento del navegador

0

La diferencia entre http://localhost.com/ y http://localhost.com/#!/ es que el segundo es un enlace al ancla, no carga una página, solo busca el ancla en la página actual, y se desplaza hacia ella si se encuentra. Debe hacer que su enlace se vea como el primero, sin "#" cerca de su final.

2

Necesitaba 'refrescar' mi página en caso de cambio de orientación porque no todas mis preguntas de los medios css para el modo de retrato donde ejecutó correctamente de forma predeterminada. Esto es lo que terminé haciendo:

Backbone.history.fragment = null; 
Backbone.history.navigate(document.location.hash, true); 

Por supuesto, para la integridad de esta respuesta, este fue envuelto en algún código cambio manejo orientación:

window.addEventListener('orientationchange', function() { 
    Backbone.history.fragment = null; 
    Backbone.history.navigate(document.location.hash, true); 
}, false); 
7

En caso de que quiera volver a cargar el conjunto página con una vista deseada. Esto podría hacer que senes para el botón de inicio. La ventaja será que refrescará la memoria.

Ir a cualquier ruta sin cargarla (sin el 'verdadero') y vuelva a cargar

Backbone.history.navigate('route/goes/here'); 
window.location.reload(); 
+1

gracias por esto. Esto refresca las sesiones del lado del servidor también. – Leahcim

0

A menudo se puede modificar su ruta para incluir un splat, por lo que se puede añadir una cadena aleatoria hasta el final de un href para hacerlo único, pero igual a la ruta "hogar". (Nota: haga de esta su última ruta.)

En las rutas:

routes: { 
    "*str": "home" 
} 

En la vista de:

render: function() { 
    var data = {href: +(new Date())}; 
    _.extend(data, this.model.attributes); 
    this.$el.html(this.template(data)); 
    return this; 
} 

en la plantilla de (manillar mostrados aquí):

<a href="{{href}}">Home Link</a> 
1

También puede simplemente hacer un cambio de sentido a la URL mediante la adición de un número aleatorio al final:

var url = $(this).attr('href') + '?rand=' + Math.floor(Math.random() * 1000); 
Backbone.history.navigate(url, true); 

Esto es especialmente útil para IE, ya que no va a solicitar nuevos datos a través de una llamada AJAX si el URL no tiene cambiado

36

Está buscando Backbone.history.loadUrl. Desde el Annotated Source:

intento de cargar el fragmento de URL actual. Si una ruta tiene éxito con una coincidencia, devuelve true. Si no hay rutas definidas que coincidan con el fragmento, devuelve false.

Así, para un simple refresco de enlace, se puede añadir el siguiente evento a su Backbone.View:

events: { 
    'click a#refresh': function() { 
    Backbone.history.loadUrl(); 
    return false; 
    } 
} 
+2

Esta es una respuesta mucho mejor: más corta, más limpia, y no involucra mucking con las "partes internas" ('Backbone.history.fragment') de Backbone. – machineghost

0

Con el fin de proporcionar un fragmento de código reutilizable que aumentó la Backbone.View con un método de ayuda para reutilizarlo donde sea que necesitemos volver a cargar la misma página a pesar de las limitaciones del enrutador Backbone.

En nuestro archivo app.js o cualquier otro lugar adecuado

Backbone.View = Backbone.View.extend({ 
    refreshPage: function(e){ 
     if(e.target.pathname){ 
      Backbone.history.navigate(e.target.pathname); 
     } 
     window.location.reload();   
    } 
}); 

De esta manera si tenemos un enlace como

<a href="/whatever" id="whateverId">Some text </a> 

en nuestra opinión, que sólo se necesita para unirse al evento de clic a esa devolución de llamada para aprovechar la función de página de actualización, en la medida en que la ayudante de la página de renovación estará disponible a través de la cadena prototipo

events: { 
    'click #whateverId': 'refreshPage', 
} 

Por lo que no es necesario cambiar la "etiqueta" que es una solución más limpia que ahorrará algo de código repetitivo

creo que sirve

0

Funciona con

myBackboneRouter.navigate("users", {trigger: true}) 
1

Puede restaurar fácilmente la página mediante el siguiente enfoque:

@win_loc = window.location.toString().replace("#","") 
Backbone.history.redirectTo(@win_loc) 
5

el backbone.history.loadUrl es la solución.

La función del botón Inicio manipulación clic (si la casa es la raíz/de la aplicación web) debería ser:

myAppRouter.navigate(''); 
Backbone.history.loadUrl(); 
+0

Agradable y simple – SSS

0

Aquí es mi método favorito hasta ahora:

if (!Backbone.history.navigate(urlPath, true)) { 
     Backbone.history.loadUrl(); 
} 
Cuestiones relacionadas