2011-12-12 24 views
11

Sto cercando di rendere il mio codice haml lato client utilizzando JavaScript. Ci sono dei parser haml piacevoli sul lato server come Jade o haml.js ma non conosco alcun parser/decoder haml nel lato client.Qualsiasi parser haml lato client?

Aggiornamento: Jade che è praticamente haml ora supporta lato client.

+1

trovato [jquery-Haml] (https://github.com/creationix/jquery-haml) - non proprio haml ma piuttosto vicino – froderik

risposta

8

Dopo aver cercato su Google ho trovato il "client-side-haml-js" github project. Sembra che dovrebbe soddisfare le vostre esigenze:

Il lato client-Haml-js è un compilatore scritto in CoffeeScript che compila modelli di testo in formato HAML in funzioni JavaScript che generano HTML. È stato ispirato dal server haml Javascript progetto, ed è stato scritto per essere compatibile con funzionalità Ruby lato server HAML, supporta tutti i principali browser (IE 7+, Firefox 3.6+, Chrome 10+, Safari), hanno Dipendenze minime di runtime (solo underscore.js, underscore.string e CoffeeScript se si utilizza CoffeeScript nei propri modelli).

NOTA: il compilatore haml richiede un browser con un parser JSON. Per i browser come IE7, è necessario includere anche un'implementazione JSON. Vedi http://www.json.org/ per maggiori dettagli. Un'implementazione JSON è disponibile a https://github.com/douglascrockford/JSON-js.

Esempio dalla loro pagina GitHub:

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

Sembra che supporta anche un metodo text/Haml-modello simile a jQuery-templates:

<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

Ma, dopo aver esaminato i loro documenti, sembra che compaia da stringhe HAML in JavaScript che inviano stringhe HTML, quindi non così performante come potrebbe essere. Ad esempio, invece di compilare le stringhe HTML, sarebbe molto più vantaggioso compilare l'API JS per la creazione di elementi, ad es. 'var div = document.createElement ('div'); div.setAttribute (...); div.appendChild (...) '. Inoltre, l'utilizzo di DocumentFragment porterebbe a prestazioni ancora maggiori, o anche migliori se realizzeranno o utilizzeranno una biblioteca virtuale dom. React è bello perché JSX si compila nelle chiamate JS che creano un dom virtuale, che è più veloce. – trusktr