Si habilito pushState en el enrutador de la red troncal, ¿necesito usar return false en todos los enlaces o la columna vertebral se encarga de esto automáticamente? ¿Hay muestras, tanto la parte html como la parte script?Backbone.js and pushState
Respuesta
Este es el patrón utiliza Tim Branyen en su boilerplate:
initializeRouter: function() {
Backbone.history.start({ pushState: true });
$(document).on('click', 'a:not([data-bypass])', function (evt) {
var href = $(this).attr('href');
var protocol = this.protocol + '//';
if (href.slice(protocol.length) !== protocol) {
evt.preventDefault();
app.router.navigate(href, true);
}
});
}
Usando que, en lugar de hacerlo de forma individual preventDefault en los enlaces, deja que el router los manejan de forma predeterminada y hacer excepciones por tener un atributo data-bypass
. En mi experiencia, funciona bien como un patrón. No conozco ningún gran ejemplo, pero probarlo usted mismo no debería ser demasiado difícil. belleza de Backbone radica en su simplicidad;)
$(document.body).on('click', 'a', function(e){
e.preventDefault();
Backbone.history.navigate(e.currentTarget.pathname, {trigger: true});
});
match()
o startsWith()
(ES 6) también puede ser utilizado para el control de protocolo. Si desea admitir urls absolutas por pathname
propiedad, consulte las urls base por location.origin
.
function(evt) {
var target = evt.currentTarget;
var href = target.getAttribute('href');
if (!href.match(/^https?:\/\//)) {
Backbone.history.navigate(href, true);
evt.preventDefault();
}
// or
var protocol = target.protocol;
if (!href.startsWith(protocol)) {
// ...
}
// or
// http://stackoverflow.com/a/25495161/531320
if (!window.location.origin) {
window.location.origin = window.location.protocol
+ "//" + window.location.hostname
+ (window.location.port ? ':' + window.location.port: '');
}
var absolute_url = target.href;
var base_url = location.origin;
var pathname = target.pathname;
if (absolute_url.startsWith(base_url)) {
Backbone.history.navigate(pathname, true);
evt.preventDefault();
}
}
Usted puede prevenir el comportamiento predeterminado de click en <a>
etiquetas de HTML. Simplemente agregue el código siguiente dentro de la etiqueta <script />
.
<script>
$(document).on("click", "a", function(e)
{
e.preventDefault();
var href = $(e.currentTarget).attr('href');
router.navigate(href, true);router
});
</script>
- 1. pushstate no funciona correctamente en backbone.js
- 2. ¿Para qué sirve pushState?
- 3. Reescribiendo nginx para pushState-URL's
- 4. Backbone.js and Rails - ¿Cómo manejar parámetros de modelos Backbone?
- 5. Backbone.js y mod rewrite
- 6. Puede usar pushState
- 7. pushState en Android 4.0
- 8. Error Ajax + pushState en Chrome
- 9. Usando HTML5 pushstate en angular.js
- 10. Reutilización de vistas/rutas de la red troncal en el servidor cuando se utiliza Backbone.js pushstate para seo/marcadores
- 11. (OrElse and Or) and (AndAlso and And) - ¿Cuándo usar?
- 12. marcos Simulación con carga jQuery() y pushState()
- 13. HTML5/jQuery: pushState y popState - ¿enlace profundo?
- 14. Backbone router no funciona con pushState
- 15. Uso de HTML5 pushState() en IE9
- 16. ¿Cómo funciona Github PushState sin Hash Tags?
- 17. de hash y no de hash URL en Backbone.js
- 18. Backbone.js historia 'en el cambio de ruta' evento?
- 19. backbone.js https
- 20. Backbone.js Seguridad
- 21. ¿Debería Backbone.js obtener los parámetros GET de la URL?
- 22. ¿Cómo crear una vista base en backbone.js?
- 23. struct and class and inheritance (C++)
- 24. Volviendo a una entrada de pushState que utilizó ajax
- 25. ¿Internet Explorer es compatible con pushState y replaceState?
- 26. ¿Cómo protege pushState contra posibles falsificaciones de contenido?
- 27. pushState() y popState(): manipulando la historia de los navegadores
- 28. Configuración modular de Backbone.js
- 29. backbone.js events y el
- 30. Backbone.js Enrutamiento de URL
Impresionante, funciona genial. ¡Gracias! – Marcus
Solo un aviso: me di cuenta de que IE7 devolvía la URL absoluta en algunos casos en los que esperaba la URL relativa. Para manejar este caso, querrá normalizar el valor de 'href' para que sea una ruta relativa antes de llamar a navegar. – lupefiasco
Simplemente curioso, ¿qué está haciendo (href.slice (protocol.length)! == protocol)? – dezman