2011-12-12 11 views
11

Szukam renderowania mojego kodu haml po stronie klienta przy użyciu JavaScript. Istnieją ładne parse haml po stronie serwera, takie jak Jade lub haml.js, ale nie znam żadnego parsera/dekodera haml po stronie klienta.Dowolny parser haml po stronie klienta?

Aktualizacja: Jade, która jest w znacznym stopniu haml teraz obsługuje stronę klienta.

+1

stwierdzone [jquery-haml] (https://github.com/creationix/jquery-haml) - niezbyt haml ale całkiem blisko – froderik

Odpowiedz

8

Po pewnym przeszukaniu go znalazłem "client-side-haml-js" github project. Wygląda tak jak powinien swoich potrzeb:

stronie klienta-haml-js jest to kompilator napisany w coffeescript że kompiluje szablony tekstowe w formacie haml do funkcji JavaScript, który generują HTML. Został zainspirowany projektem serwera haml Javascript Javascript i został napisany jako kompatybilny z funkcją Ruby po stronie serwera HAML, obsługuje wszystkie główne przeglądarki (IE 7+, Firefox 3.6+, Chrome 10+, Safari), minimalne zależności środowiska wykonawczego (tylko underscore.js, underscore.string i CoffeeScript, jeśli w szablonach używany jest kod kawy CoffeeScript ).

UWAGA: Kompilator haml wymaga przeglądarki z parserem JSON. Dla przeglądarek takich jak IE7, musisz również uwzględnić implementację JSON. Aby uzyskać więcej informacji, zobacz http://www.json.org/. Implementacja JSON to dostępna pod adresem https://github.com/douglascrockford/JSON-js.

przykład z ich strony github:

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

Wygląda na to, że również obsługuje sposób text/haml szablonem podobny do jQuery wzorów:

<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

Ale po zapoznaniu się z ich dokumentami wygląda na to, że kompiluje z ciągów HAML do JavaScript, które wysyłają ciągi HTML, więc nie tak wydajne jak mogłoby być. Na przykład, zamiast kompilacji do ciągów HTML byłoby znacznie bardziej korzystne skompilowanie do JS API do tworzenia elementów, f.e. 'var div = document.createElement (" div "); div.setAttribute (...); div.appendChild (...) '. Ponadto korzystanie z funkcji DocumentFragment doprowadziłoby do jeszcze większej wydajności, a nawet lepiej, gdyby tworzyły lub używały wirtualnej biblioteki domowej. React jest fajny, ponieważ JSX kompiluje się w połączenia JS, które tworzą wirtualną domenę, która jest szybsza. – trusktr