2011-10-02 18 views
10

Estoy tratando de entender bien a backbone.js, pero me resulta difícil debido a la falta de buenos ejemplos (IMO).Forma preferida de crear enlaces con backbone.js

En primer lugar, ¿cuál es la mejor manera de obtener un enlace a un objeto.
Si quiero obtener la URL de edición de un modelo Album que podría hacer album.url() + '/edit', ¿es esta la mejor manera?

Además, intento que mi aplicación funcione al 100% sin javascript, así que no quiero que mis URL/enlaces digan /albums/#1/edit, quiero que sea /albums/1/edit y anule esto en JS.

estoy pensando que crear direcciones URL y uso normales jQuery.live llamar router.navigate en Backbone.js
nunca tuve que esto funcione sin embargo, cuando llamo router.navigate('/albums/2', true) la URL cambia, pero mi programa de acción nunca se llama. Si actualizo, se llama para que la ruta coincida.

¿Qué me estoy perdiendo?

Respuesta

18

La respuesta básica, que es algo frustrante, es "¡no hay forma preferida!". Backbone.js no te dice cómo configurar enlaces, puedes hacerlo como quieras. Encontré esta flexibilidad tan molesta como tú, al menos al principio.

Así que aquí es la forma en que estoy acercarse a esto en my current project, con el (grande) advertencia de que esto es sólo una de las muchas maneras de hacer las cosas en Backbone:

  • En su mayor parte, Don no use enlaces reales No hay una razón explícita para no hacerlo, pero significa que debe hacer un seguimiento de un conjunto de cadenas de URL que deben ser coherentes. Prefiero pegar todo el formato de URL en mis enrutadores y no tratarlo en otro lado.

  • Para abrir una nueva vista de "nivel superior", como una pantalla de edición, configuro algo que activa un evento. En la aplicación en la que estoy trabajando actualmente, tengo un modelo de estado global, y para abrir una nueva vista, llamo al state.set({ topview: MyTopView }). Esto hace que el objeto state active change:topview.

  • Cualquier parte de la IU que deba cambiar cuando cambie la vista de nivel superior tiene un método de actualización vinculado a change:topview. Cuando se desencadena el evento, miran al state.get('topview') y lo actualizan según sea necesario.

  • Considero que mis enrutadores son solo partes marginalmente especializadas de la interfaz de usuario, básicamente son vistas que se muestran en la barra de direcciones del navegador, en lugar de en la ventana. Al igual que otras vistas, actualizan el objeto state en eventos de IU (es decir, una nueva URL) y, al igual que otras vistas, escuchan el objeto state para ver los cambios que provocan su actualización. La lógica de que la pantalla de edición tiene la URL albums/<albumid>/edit está completamente encapsulada en el enrutador, y no me refiero a ella en ningún otro lado.

Esto funciona bien para mí, pero añade un patrón completamente nuevo, el objeto Estado global, a la estructura principal, por lo que difícilmente se puede llamar a esto el enfoque de "preferido".

Actualización: También tenga en cuenta que .url(), en el idioma Backbone, se refiere a la URL del modelo en la API back-end, no la URL front-end (no es que Django de get_absolute_url).No hay ningún método en la configuración Backbone predeterminada que le proporcione una URL de usuario para su modelo; deberá escribir esto usted mismo.

+0

¡Excelente publicación! ¿Alguna idea de por qué 'navigate' no llama a mi enrutador? –

+0

Tendría que ver más código: pasar 'true' para navegar debería llamar a la función asociada con la ruta, por lo tanto, su ruta no se reconoce como que coincide con un patrón de ruta, o la función no está haciendo lo que esperaba. .. – nrabinowitz

+0

Ah, la URL de navegación debe ser una coincidencia exacta con la ruta, lo que significa que tuve que eliminar el inital/ –

7

Además, intento que mi aplicación funcione al 100% sin javascript; así que no quiero que mis URL/enlaces digan /albums/#1/edit, quiero que sea /albums/1/edit y anule esto en JS.

puedes hacer exactamente esto con pushState. simplemente activarlo en su llamada Backbone.history.start:

Backbone.history.start({pushState: true})

dice esto Backbone para utilizar la API HTML5 Historia (también conocido como "pushState"), que utiliza URLs completas exactamente igual que usted está queriendo.

leer sobre la historia de la API aquí: http://diveintohtml5.ep.io/history.html

y redactó una serie de 2 basarse en el uso pushState w/la segunda parte se centra en la mejora progresiva de la columna vertebral, para hacer lo que está necesitando:

http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-1-introducing-pushstate/

y

http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-2-progressive-enhancement-with-backbone-js/

º esperanza at helps :)

+1

Estoy usando 'router.navigate' ahora, está funcionando muy bien, excepto cuando el usuario quiere volver al historial, la red troncal llama a todas las acciones anteriores en el controlador. Archivado un error. ¡Gracias por la informacion sin embargo! –

Cuestiones relacionadas