2011-12-12 55 views
11

我正在尋找使用JavaScript在客戶端渲染我的haml代碼。服務器端有很好的haml解析器,如Jadehaml.js,但我不知道客戶端有任何haml解析器/解碼器。任何客戶端哈姆分析器?

更新:Jade這是相當多HAML現在支持客戶端。

+1

實測值[jQuery的HAML]( https://github.com/creationix/jquery-haml) - 不是真的HAML但八九不離十 – froderik

回答

8

一些google搜索後,我發現了"client-side-haml-js" github project。看起來它應該滿足您的需求:

的客戶方,引入haml-JS是寫在CoffeeScript中是 編譯在HAML格式文本模板成 生成HTML的Javascript功能的編譯器。已通過服務器端的Javascript HAML項目 靈感,並已寫入是功能使用Ruby 服務器端兼容HAML,支持所有主流瀏覽器(IE 7+,火狐3.6 + Chrome瀏覽器10+,Safari瀏覽器),有最小運行時依賴(僅 underscore.js,underscore.string和CoffeeScript的,如果在你的模板中使用 的CoffeeScript)。

注:HAML編譯器需要用JSON解析器的瀏覽器。對於像IE7這樣的瀏覽器,您還需要包含一個JSON實現。有關更多詳細信息,請參閱 http://www.json.org/。 JSON實現是 ,可在https://github.com/douglascrockford/JSON-js處獲得。從它們的github頁

實施例:

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

看起來它也支持類似的jquery模板文本/ HAML模板方法:

<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

不過,看着自己的文檔後,它看起來像它從HAML字符串編譯成JavaScript代碼發送HTML字符串,所以還不如高性能的它可能是。例如,不用編譯爲HTML字符串,編譯爲JS API創建元素f.e會更有益處。 'var div = document.createElement('div'); div.setAttribute(...); div.appendChild(...)'。另外,使用DocumentFragment會帶來更高的性能,如果他們製作或使用虛擬dom庫,甚至會更好。 React很好,因爲JSX編譯成JS調用,創建虛擬dom,速度更快。 – trusktr