2011-12-12 8 views
11

Estoy buscando renderizar mi código haml en el lado del cliente usando JavaScript. Hay buenos analizadores de haml en el lado del servidor como Jade o haml.js, pero no conozco ningún analizador/decodificador de haml en el lado del cliente.¿Algún analizador de haml del lado del cliente?

Actualización: Jade que es bastante haml ahora es compatible con el lado del cliente.

+1

encontrado [jquery-haml] (https://github.com/creationix/jquery-haml) - no realmente haml pero muy cerca – froderik

Respuesta

8

Después de buscar en Google encontré el "client-side-haml-js" github project. Parece que debe satisfacer sus necesidades:

El clientside-haml-JS es un compilador escrito en CoffeeScript que compila plantillas de texto en formato HAML en funciones Javascript que generan HTML. Se ha inspirado en el lado del servidor haml Javascript del proyecto, y se ha escrito para ser compatible con Ruby del lado del servidor HAML, es compatible con todos los principales navegadores (IE 7+, Firefox 3.6+, Chrome 10+, Safari). dependencias mínimas de tiempo de ejecución (solo underscore.js, underscore.string y CoffeeScript si usa CoffeeScript en sus plantillas).

NOTA: El compilador de haml requiere un navegador con un analizador JSON. Para los navegadores como IE7, también debe incluir una implementación JSON. Vea http://www.json.org/ para más detalles. Una implementación JSON es disponible en https://github.com/douglascrockford/JSON-js.

Ejemplo de su página github:

var fn = haml.compileStringToJs("%h1\n %div\n %p\n %span"); 
var html = fn(); 

Parece que también soporta un método de texto/haml-plantilla similar a jquery-plantillas:

<script type="text/haml-template" id="simple"> 
%h1 
    %div 
    %p 
    %span 
</script> 

<script type="text/javascript"> 
    var fn = haml.compileHaml('simple'); 
    var html = fn(); 
</script> 
+0

Pero, después de mirar sus documentos, parece que se compila a partir de cadenas HAML en JavaScript que envían cadenas de HTML, por lo que no es tan eficiente como podría ser. Por ejemplo, en lugar de compilar en cadenas HTML, sería mucho más beneficioso compilar a la API JS para crear elementos, por ej. 'var div = document.createElement ('div'); div.setAttribute (...); div.appendChild (...) '. Además, el uso de DocumentFragment conduciría a un rendimiento aún mayor, o incluso mejor si hacen o usan una biblioteca dom virtual. Reaccionar es agradable porque JSX compila en llamadas JS que crean una dom virtual, que es más rápida. – trusktr

Cuestiones relacionadas