javascript - La mejor estrategia para usar la plantilla HAML con Backbone.js
templates (8)
Me estoy metiendo en Backbone.js para estructurar el código de JavaScript para mi proyecto y me encanta HAML para crear plantillas en el backend (rieles), así que me gustaría utilizarlo para la creación de plantillas de Backbone Views. Sé que hay varios puertos HAML para Javascript, como https://github.com/creationix/haml-js y la red troncal soporta JST y bigote con facilidad.
¿Cuál es la mejor manera de utilizar plantillas Haml en su lugar.
¿Hay algún inconveniente para usar HAML en el lado del cliente? Rendimiento, tiempo de carga de scripts extra (atendido por herramientas de empaque de activos como jammit)
Echa un vistazo a Middleman. Incluye haml, sass, coffee, slim, etc. Utiliza gemas como rails y tiene muchas otras funcionalidades increíbles.
Incluso tienen una extensión personalizada para la red troncal, https://github.com/middleman/middleman-backbone
También le permite construirlo en html, css y js estáticos para una carga súper rápida.
Estoy a punto de darle una haml-coffee . (sin juego de palabras) No puedo cantar las alabanzas del coffeescript lo suficiente; Además, ahora es un valor predeterminado en Rails 3.1. Ahora puedo incrustar coffeescript dentro de mi lenguaje de plantillas favorito y precompilar el lote.
Oh, la alegría ... ahora para que funcione.
He estado trabajando en la aplicación Rails 3 / Backbone y he tomado un enfoque diferente después de evaluar hamlbars , haml_assets y jugar con https://github.com/creationix/haml-js .
Todas estas son gemas sólidas que ofrecen soluciones al problema, cada una con un cierto conjunto de compensaciones. Haml-js, por ejemplo, requiere plantillas de representación del lado del cliente (no hay nada de malo en esto, es simplemente una compensación). Hamlbars y haml_assets se conectan a la canalización de activos, pero como existen fuera del objeto de solicitud, algunos ayudantes no funcionarán. Ambos hacen algunos ajustes para esto e incluyen los ayudantes de url y los ayudantes de ActionView, pero no esperan tener las mismas características que escribir haml en una vista.
Mi enfoque es algo voluminoso (estoy planeando poner esto en un motor) pero funciona bien y se puede replicar fácilmente. Utiliza haml_assets cuando es posible, pero vuelve a servir una plantilla desde un controlador "templates" con una acción "show"
- Coloque sus vistas en el directorio view / templates /
- Puede agregar un diseño que convierte esta vista en una función JST
- Puede especificar la acción show para devolver "application / javascript" como su tipo de contenido
- Usted tiene acceso a todos los ayudantes cuando escribe plantillas
- Puede agregar etiquetas de script para "/ template / whatever" que representarán la plantilla que sea, o utilizar globbing de ruta para vistas mejor organizadas.
El beneficio de este enfoque es que, debido a que sus puntos de vista son accesibles desde los controladores, tiene la opción de representarlos como plantillas jst (a través del controlador de plantillas) o a través de otros controladores como parciales. Esto le permitiría servir páginas seo-friendly directamente desde url''s (como / products / widgets / super-cool-widget) donde los usuarios pueden obtener las plantillas en caché / templates / widgets / super-cool-widget.
No puedo responder en línea en el hilo de Craig (supongo que necesito algún tipo de reputación para publicar en las respuestas existentes), pero ya no es necesario agarrar un tenedor de jammit para usar haml-js - el compromiso lo hizo la rama principal de jammit. Consulte aquí para obtener más información: https://github.com/documentcloud/jammit/commit/b52e429f99cac3cd1aa2bf3ab95f1bfaf478d50d
EDIT: el lanzamiento de la última gema fue en enero, y los commits se agregaron en marzo, por lo que tendrás que configurar el bundler para que se ejecute contra el repositorio github o compilarlo localmente. Si no usa HEAD of jammit, tendrá problemas para analizar las plantillas correctamente, ya que se eliminan las nuevas líneas.
Todo lo que necesitaba hacer para configurar esto es:
1) Agregue lo siguiente a mi archivo "assets.yml":
template_function: "Haml"
2) Agregue la fuente y las plantillas de haml-js que quería cargar a mi archivo de activos: javascripts: core: - public / javascripts / vendor / haml.js templates: - app / views / events / _form.haml.jst
3) Asegúrate de que estaba cargando tanto el núcleo como las plantillas en mi application.html.erb
<% = include_javascripts: core,: templates%>
4) Acceder a las plantillas en mis archivos fuente a través de JST [nombre de archivo] (es decir, en este caso JST [''_ form'']). Vale la pena mencionar una cosa: jammit revisará todas sus plantillas y espacio de nombres en la ruta común, por lo que si tiene app / views / foo / file.jst y app / views / bar / file.jst, accederá con JST [''foo / file.jst''] y JST [''bar / file.jst'']. Si tuvieras app / views / foo / file1.jst y app / views / foo / file2.jst, estarían directamente en JST [''file1.jst''] y JST [''file2.jst''] - que es fácil de olvidar cuando comienzas con tus primeras plantillas.
Todo funcionó bastante bien. No estoy seguro de por qué Craig necesitaba definir una función. Acabo de utilizar la función Haml predeterminada proporcionada por haml.js, pero tal vez me falta algo.
Parece que haml_coffee_assets le ofrece lo que desea. (Plantillas window.JST , escritas en HAML, con soporte inline coffescript)
Puedes probar Express con Jade (plantillas parecidas a Haml). Express crea en Connect para enrutar archivos estáticos. Jade es uno de los motores de plantillas más rápidos que he probado con Node.js
Sé que esto sería un poco al rededor de la pregunta, pero aquí vamos :)
Yo mi aplicación de rieles utilizo haml para todas las vistas en el back-end. Es asombroso. Por alguna razón (principalmente i18n), no me gusta usar plantillas en el lado del cliente. Así es como lo hago:
- crea toda tu plantilla en ruby haml y guárdalas en una etiqueta script con un tipo funky (uso text / js-template). Esto creará html previamente procesado con el que puedes jugar con jquery y backbone.
- cuando cree sus vistas de red troncal, cargue la plantilla almacenada y añádala a su documento
- Renderice su vista alterando la plantilla preexistente
Tratas solo con html y jQuery es increíble para eso. Para algunas vistas que no requieren i18n, utilizo la plantilla de subrayado porque ya está allí.
En cuanto al rendimiento de las plantillas haml, parece que el bigote y el manubrio son más rápidos.
Sé que ya lo mencionaste, pero te sugiero que uses haml-js con Jammit. Simplemente incluya haml.js en sus javascripts y en su asset.yml add template_function: Haml e incluya sus archivos de plantilla en un paquete. p.ej
javascript_templates:
- app/views/**/*.jst.haml
Luego, en sus vistas puede incluir este paquete ( = include_javascripts :javascript_templates ) y Jammit empaquetará cualquier archivo .jst.haml en window.JST[''file/path''] . (Si ve el origen de la página, debería ver un archivo javascript como <script src="/assets/javascript_templates.jst" type="text/javascript"></script> )
Para usar estas plantillas, simplemente llame a uno de esos JST creados por Jammit. es decir
$(''div'').html(JST[''file/path'']({ foo: ''Hello'', bar: ''World'' }));
Y Jammit usará la función de función de plantilla Haml-js para representar la plantilla.
Nota: Asegúrese de señalar el repositorio github de Jammit en su Gemfile para obtener la versión más reciente que admita los caracteres de nueva línea necesarios para que haml-js funcione.