iT邦幫忙

2022 iThome 鐵人賽

DAY 21
0
Software Development

Rails Active Model系列 第 21

D-21 Rails form bilder I18n

  • 分享至 

  • xImage
  •  

相信各位 Rails 工程師都聽說或使用過 form_for or form_with 吧!
這是一個可以很簡單可以幫助你 render 出前端 form 的 helper method。
關於可以傳入哪些參數,可以參考 API Dock
這篇著重介紹翻譯的部分。我們先把翻譯語言改為中文比較好體現畫面的翻譯,在 config/application.rb 加上設定如下:

config.i18n.available_locales = %w(en chinese)
config.i18n.default_locale = :"chinese"

假設我有個 form object,就用 user 代替好了。
這邊要填入姓名年齡與性別,大概這樣寫:

<%= form_for @user do |form| %>
  <div class="field">
    <%= form.label :name %>
    <%= form.text_field :name %>
  </div>

  <div class="field">
    <%= form.label :age %>
    <%= form.number_field :age %>
  </div>

  <div class="field">
    <%= form.label :gender %>
    <%= form.select :gender, ['male', 'female','other'], { prompt: true } %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

render 出畫面如下:
https://ithelp.ithome.com.tw/upload/images/20221005/20151038MTiEr4WLaI.png

你可以發現,除了欄位我們前面介紹過可以翻譯之外,連按鈕跟選擇的 prompt 提示都可以有自己的翻譯!甚至不用傳入 value 指定要顯示的值!
欄位翻譯的部分,完全可以共用前篇介紹過的翻譯 key,相當方便!

至於表單送出鈕的翻譯 key 的部分,一樣從優先度高到低羅列出來:

:"helpers.submit.user.create" # user 要看你在 form_for 傳入的物件 class name,或者在 options 指定 `:as` 作為此處的 naming
:"helpers.submit.create" # create 則是 form_for 自動幫你指定的 action key
# 如果是 active model 則都會是用 create 來當 action key,active record 則會看你傳入的是不是 new record,如果不是則會變成 update。
"Create user"
# 如果以上兩隻 key 都沒有,則會使用 action key + model name 這樣的組合。

再來是 select prompt 提示的翻譯 key,只有一個:

:"helpers.select.prompt"

如果翻譯檔內沒有這隻翻譯 key,且 form.select 的 options 又傳入 prompt: true ,則會顯示 Please select。不然就是你要在 prompt option 傳入 string 作為選擇提示。

這兩個表單功能項的翻譯的可選擇性比較小些,但讀者依然可以依照自己的需要,在 form_for 的區塊自行傳入值去修改它。

下一篇來介紹自訂 form builder!一樣可以用 form_for 來運作!


上一篇
D-20 Active Model errors - 4
下一篇
D-22 自訂義 form_for 的 form builder!
系列文
Rails Active Model28
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言