當接收後端來的資料，如是JSON格式，我們需要將他動態轉換成HTML的標籤語法。但要使
用block語法將他動態產生出來。
以下是我們欲從後端sinatra傳來一份JSON格式，動態將它顯示在select 標籤的option選項裡
面的程式碼(haml檔)。
%body
%h1{:id => "username"} #{locals[:user_name]}
-#%p{:id => "session_name"} #{session[:tmp].inspect}
%p choose your friends:
%select{:name => "f_list",:id =>"f_list"}
- JSON.parse(friends_list).each do |f|
%option{:value => "#{f.to_s}"}= f.to_s
- end unless @do_nothing
在select選擇器裡面 可以利用 - 輸入ruby語法。例如上述程式碼，我們可以使用區塊語法。
但haml不支援{ }，我們必須用do - end 來做上下區塊包起來。
根據上述程式碼，我們可以在inline下，間隔好空格，來將%option標籤動態產生出來。
甚至可以將裡面屬性賦予值。(記得先轉換為string)
但注意裡面一條程式碼
- end unless @do_nothing
原本只需要end 。但haml裡面end含有其他意思。(甚至if - else都不需要用到end)
但如果必須要用end包起來(如上述區塊程式碼)，我們必須透過加一點語法進去
unless @do_nothing
就可以完成整個區塊語法(上述程式碼代表為不做事，但函帶有end語法)
結果畫面如下:
產生的前端source:
<!DOCTYPE html> <html> <head> <title>Friends</title> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script> <script src='to_client.js' type='text/javascript'></script> </head> <body> <h1 id='username'>test3</h1> <p>choose your friends:</p> <select id='f_list' name='f_list'> <option value='test2'>test2</option> <option value='test4'>test4</option> </select> </body> </html>
資料來源:
stackoverflow
stackoverflow_problem
haml
沒有留言:
張貼留言