# [Rails4][view][note]rails4 view筆記

###### tags: `Rails4`,`view`,`note`

## layout相關

https://railsbook.tw/chapters/15-layout-render-and-view-helper.html#layout
### 整個 Controller 都套用同一個版型

class CandidatesController < ApplicationController
  layout "backend"

  # ...
end

### 只有特定 Action 套某個版型

class CandidatesController < ApplicationController

  def index
    render layout: "backend"
  end

  # ...
end

### 特定 Controller 不使用任何版型

class CandidatesController < ApplicationController
  layout false

  # ...[略]...
end

### 特定 Action 不使用任何版型

class CandidatesController < ApplicationController

  def index
    @candidates = Candidate.all
    render layout: false
  end

  # ...[略]...
end

---

## form helper相關
https://rails.ruby.tw/form_helpers.html

### submit button
>加上data-disable-with屬性可設定提交時將按鈕disable以及要顯示的文字

<!-- ... -->
<%= f.submit "確定",  "data-disable-with" => "更新中", class: "btn btn-info" %>

### 下拉選單(select)

#### 標準用法(參考進度條線上課程)

 <%=f.select("subcat_id",Cat.all.collect{|s| [s.name,s.id]},{include_blank:'請選擇:'},{class:'form-control'}) %>

...

<script>

<!--
將第1個空白選項設定為disabled
https://www.tutorialrepublic.com/faq/how-to-add-attribute-to-an-html-element-in-jquery.php
https://stackoverflow.com/questions/590163/how-to-get-all-options-of-a-select-using-jquery

-->
  var options = $('#product_subcat_id option');
  var values = $.map(options ,function(option) {
    if(option.value==""){
      $(option).attr("disabled","true")
    }
  });
</script>

#### 做成helper

> 2019/12/29:
> bug:此作法會導致在edit頁面時讀不到原本的項次

app/helpers/application_helper.rb

module ApplicationHelper

    def app_helper_show_dropdown(f,select_name,model,
        key: :name,
        value: :id,
        include_blank: true,
        first_option_txt: '請選擇:')

        first_option=include_blank ? 
        [[first_option_txt,"",{:selected=>"selected",:disabled=>"true"}]]: 
        []
        
        f.select(select_name, options_for_select(first_option+model.pluck(key,value){ 
        |p| [p[0],p[1]]}),
        {},
        {class:'form-control'})
      end
  
end

view簡例

<%= form_for product do |f| %>
  
  #...
    <%= app_helper_show_dropdown(f,:subcat_id,Cat) %>
   #...
<% end %>

---

#### ex1
https://stackoverflow.com/questions/5783350/adding-a-class-to-option-elements-using-the-rails-3-form-helpers

---

#### ex2
https://apidock.com/rails/ActionView/Helpers/FormOptionsHelper/select
https://progressbar.tw/courses/3/watching

<%= select("product","subcat_id", Cat.pluck(:name,:id) { |p| [p[0],p[1]] }, { prompt: 'Select Category:' },{class:'form-control'})%>

產生的html:

<select class="form-control" name="product[subcat_id]" id="product_subcat_id">
    <option value="">Select Category:</option>
    <option value="1">cat1</option>
    <option value="2">cat2</option>
    <option value="3">cat3</option>
</select>
      
    

>說明:
>1.最後一個hash的屬性會加在html select tag上面

---

### 給option加上class

    <%= f.select(:subcat_id, options_for_select([ ["None", 0, {:class=>'none'}], ["Some", 1, {:class=>'bold'}], ["More", 2] ]), { :include_blank => true })%>

---

## link_to 相關
link_to的詳細說明可參以下網址:

https://apidock.com/rails/ActionView/Helpers/UrlHelper/link_to

簡單來說,

link_to可分為以下四種寫法:

link_to(body, url, html_options = {})
  # url is a String; you can use URL helpers like
  # posts_path

link_to(body, url_options = {}, html_options = {})
  # url_options, except :method, is passed to url_for

link_to(options = {}, html_options = {}) do
  # name
end

link_to(url, html_options = {}) do
  # name
end

把通常會用到的各種可能都寫出來,就會變成像以下這樣子(格式可自行調整):

<%= link_to("link name", { 
            :controller => "controller_name", 
            :action => "action name",
            :qs1=>"1",
            :qs2=>"2",
            :qs3=>"3"
          } ,{ 
              :method => :get,
              :class => "class-name",
              :id => "id-name",
              :style => "some css style here;",
              :data => {confirm:"sure?"}
            }) %>

### 常用link_to整理

#new
<%= link_to "add new", new_product_path ,:class=>"some_class" %>

#show
<%= link_to  "detail", product_path(f.id) ,:class=>"some_class" %>

#edit
<%= link_to  "edit", edit_product_path(f.id) ,:class=>"some_class" %>

#destroy
<%= link_to  "delete", product_path(f.id) , method: :delete, data:{confirm:"是否確認刪除？"},:class=>"some_class" %>

### 回上一頁
https://stackoverflow.com/questions/22621408/previous-page-in-link-to

<%= link_to "back", request.referer.present? ? request.referer : default_path %>

>把default_path換成找不到上一頁時要導向的預設路徑即可

### 在link_to中使用send方法

<%= link_to "some link", send("some_link_path", param) %>

---
## assets路徑相關

<%= image_tag("main/img/ajax-loader.gif",alt: "") %>

>路徑根目錄是從app/assets算起

---
## partial相關

### 引用partial
view

<%= render partial: "some/path/to/the_partial" :locals => { :a => 1, :b => 2 , :c => 3} %>

partial
app/views/some/path/to/_the_partial.html.erb

a:<div><%= a %></div>
b:<div><%= b %></div>
c:<div><%= c %></div>
d:<div><%= d ||= 'default value of d' %></div>
e:<div><%= e ||= 'default value of e' %></div>