Link Search Menu Expand Document
Rails 實戰聖經

Action View - 樣板設計

Any fool can write code that a computer can understand. Good programmers write code that humans can understand. - Martin Fowler

在這一章中我們將進入MVC架構中的View，也就是提供介面給用戶操作，與我們的應用程式做互動。

ActionView是Rails中處理View的元件名稱，而提供給用戶的文件，我們會用Template樣板來呈現。本章假設讀者們都對HTML有基本的認識。

Template樣板

什麼是Template樣板呢？我們知道伺服器最終提供給瀏覽器的格式是HTML文件，而Template樣板就是動態產生HTML的方式。

相對的說，我們用靜態HTML來稱呼不經過程式產生的HTML文件

Rails預設用來產生Template的方式是Embedded Ruby(ERb)，如果你曾經使用過PHP、JSP或ASP，那麼你會非常熟悉這種內嵌程式碼的風格，這是一種最為直覺且容易學習的方法。例如以下是一小段嵌入目前時間的ERb，中間<%= %>的部份便是Ruby程式：

<h1><%= Time.now.to_s %></h1>

Rails的Template檔案位置和名稱也是有玄機的，例如app/views/welcome/index.html.erb來說，welcome目錄是它的Controller名稱，檔案第一段index是它的Action名稱，附檔名則是用來指定要用什麼方式來產生什麼格式的文件：index.html.erb表示用ERb產生HTML格式的文件。會有這樣慣例的原因，你可能已經猜到，那就是使用ERb不代表一定就是用來產生HTML。用什麼Template引擎(在Rails中又叫作Template Handler)產生文件，和文件的Format格式是兩回事情。所以ERb其實可以用來產生任何文字檔格式，例如CSV、XML、JavaScript等等。

雖然可以，但ERb並不是產生XML的最好方式，通常在我們會用Builder來產生XML，例如一個叫做show.xml.builder的檔案：

people do |p|
  p.person "test"
end

就會產生以下的XML：

<people>
  <person>test<person>
</people>

以下是內建的樣板引擎與格式組合：

格式 引擎 用法
html、xhtml、js 任何文字格式都可以 erb HTML 樣板，用 &lt% ruby code %> 和 &lt%= ruby variable %> 來內遷 Ruby 程式
html、xhtml、js 任何文字格式都可以 ruby Ruby 程式，最後的 return 值就是輸出
html、xhtml、js 任何文字格式都可以 raw 直接輸出不處理
json jbuilder 請參考 https://github.com/rails/jbuilder
xml、rss、atom builder 請參考 https://github.com/jimweirich/builder

擴充Template Handler

Rails預設只有內建ERb和Builder這兩套樣板引擎，但要擴充非常容易。例如在Rails社群中，也很流行用HAML和Slim這兩套樣板引擎來取代ERb。這兩套都利用縮排的技術簡化HTML撰寫的格式，例如以下的HAML:

%section.container
    %h1= post.title
    %h2= post.subtitle
    .content
        = post.content

等同於以下的ERb：

<section class=”container”>
    <h1><%= post.title %></h1>
    <h2><%= post.subtitle %></h2>
    <div class=”content”>
        <%= post.content %>
    </div>
</section>

要安裝使用，只需要在Gemfile檔案中加上gem "haml-rails"然後bundle install即可。不過相較於ERb，使用HAML雖然可以更為有效率地撰寫HTML樣板，但是還是需要考量團隊中的網頁設計師是否能夠配合使用。

使用Renderer在Controller中直接回傳結果

有一些格式的本質不一定需要Template引擎，可以在Controller中直接render其結果即可，例如JSON和CSV或是XML。Rails對ActiveRecord model提供了to_xml和to_json方法。而CSV則可以使用FasterCSV函式庫。範例如下：

require 'csv'
class PeopleController < ApplicationController

def index
    @people = Person.all
    respond_to do |format|
      format.html
      format.json{ render :json => @person.to_json }
      format.xml { render :xml => @person.to_xml }
      format.csv do
        csv_string = CSV.generate do |csv|
            csv << ["Name", "Created At"]
            @people.each do |person|
                csv << [person.name, person.created_at]
            end
        end
        render :plain => csv_string
      end
    end
end

ERb標籤

除了上述介紹的ERb標籤<%= %>會輸出中間的Ruby程式執行結果，還有一些其他用法：

<% %>

這樣就不會輸出任何結果，通常用在if或迴圈條件中，例如：

<% @people.each do |person| %>
    <% if person.name.present? %>
        <p><%= person.name %></p>
    <% end %>
<% end %>

上述的<% %>標籤雖然不會輸出HTML內容，但是還是在HTML原始碼中換行了，為了避免輸出時多餘的換行，可以改用<%- -%>。不過實際上並沒有很多人在乎就是了，畢竟這不影響用戶的頁面。

<%# blah blah %>

這是註解，不會輸出任何內容。不過如果需要整段多行註解，有個小技巧可以善用：

<% if false %>
    <%= foo %>
    <hr>
    <%= bar %>
<% end %>

Layout版型

Layout可以用來包裹Template樣板，讓不同View可以共用Layout作為文件的頭尾。因此我們可以為全站的頁面建立共用的版型。這個檔案預設是app/views/layouts/application.html.erb。如果在app/views/layouts目錄下有跟某Controller同名的Layout檔案，那這個Controller下的所有Views就會使用這個同名的Layout。

預設的Layout長得如下：

<!DOCTYPE html>
<html>
<head>
  <title>YourApplicationName</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

其中的<%= yield %>會被替換成個別Action的樣板。

開頭的<!DOCTYPE html>說明了這是一份HTML5文件，這種宣告法向下相容於所有瀏覽器的HTML4。

如果需要指定Controller的Layout，可以這麼做：

class EventsController < ApplicationController
   layout "special"
end

這樣就會指定Events Controller下的Views都使用app/views/layouts/special.html.erb這個Layout，你可以加上參數:only或:except表示只有特定的Action：

class EventsController < ApplicationController
   layout "special", :only => :index
end

或是

class EventsController < ApplicationController
   layout "special", :except => [:show, :edit, :new]
end

請注意到使用字串和Symbol是不同的。使用Symbol的話，它會透過一個同名的方法來動態決定，例如以下的Layout是透過determine_layout這個方法來決定：

class EventsController < ApplicationController
   layout :determine_layout

	private

	def determine_layout
   	   ( rand(100)%2 == 0 )? "event_open" : "event_closed"
	end
end

除了在Controller層級設定Layout，我們也可以設定個別的Action使用不同的Layout，例如:

def show
   @event = Event.find(params[:id])
	render :layout => "foobar"
end

這樣show Action的樣板就會套用foobar Layout。更常見的情形是關掉Layout，這時候我們可以寫render :layout => false。

自定Layout內容

除了<%= yield %>會載入Template內容之外，我們也可以預先自定一些其他的區塊讓Template可以置入內容。例如，要在Layout中放一個側欄用的區塊，取名叫做:sidebar：

<div id="sidebar">
    <%= yield :sidebar %>
</div>
<div id="content">
    <%= yield %>
</div>

那麼在Template樣板中，任意地方放:

<%= content_for :sidebar do %>
   <ul>
       <li>foo</li>
       <li>bar</li>
   </ul>
<% end %>

那麼這段內容就會被置入到Layout的<%= yield :sidebar %>之中。

除了側欄之外，也常用這招讓每一頁的HTML meta特製化，例如我們可以放Facebook Open Graph，這樣分享到Facebook時，就會抓取你設定的中介資料：

<head>
  <title>YourApplicationName</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
  <%= yield :head %>
</head>

在Template樣板中，加入：

<%= content_for :head do %>
    <%= tag(:meta, :content => @event.name, :property => "og:title") %>
    <%= tag(:meta, :content => @event.description, :property => "og:description") %>
    <%= tag(:meta, :content => "article", :property => "og:type") %>
    <%= tag(:meta, :content => @event.logo.url, :property => "og:image") %>
    <%= tag(:meta, :content => event_url(@event), :property => "og:url") %>
<% end %>

在Template中可以使用的變數

我們已經認識到，在Controller Action中使用@的物件變數，就會被傳進Template中可以被存取。除此之外，還包括cookies、session、flash、params、request、response等在Controller中使用的變數也可以在Template中使用。

比較特別的是，Template中的controller變數，我們可以用這個變數讓每一頁有不同的CSS class，例如

<%= tag(:body, :class => "#{controller.controller_name} #{controller.action_name}") %>

這樣會輸出成

<body class="events show">

局部樣板Partials

局部樣板可以將Template中重複的程式碼抽出來，例如我們在Part1中示範過的新增和編輯的表單。Partial Template的命名慣例是底線開頭，但是呼叫時不需加上底線，例如：

<%= render :partial => "common/nav" %>

在這個情境下，可以省略:partial鍵：

<%= render "common/nav" %>

這樣便會使用app/views/common/_nav.html.erb這個樣板。如果使用Partial的樣板和Partial所在的目錄相同，可以省略第一段的common路徑。

在Partial樣板中是可以直接使用實例變數的(也就是@開頭的變數)。不過好的實務作法是透過:locals明確傳遞區域變數，這樣程式會比較清楚，Partial樣板也比較容易被重複使用：

<%= render :partial => "common/nav", :locals => { :a => 1, :b => 2 } %>

在這個情境下，也可以進一步把locals鍵也省略：

<%= render "common/nav", :a => 1, :b => 2 %>

這樣在partial樣板中，就可以存取到區域變數a和b。

陣列型Collection

如果是陣列的資料，像是tr或li這類會一直重複的Template元素，我們可以使用collection參數來處理，例如像以下的程式：

<ul>
    <% @people.each do |person| %>
        <%= render :partial => "person", :locals => { :person => person } %>
    <% end %>
<ul>

我們可以改寫成使用collection參數來支援陣列形式：

<ul>
    <%= render :partial => "person", :collection => @people, :as => :person %>
<ul>

在_person.html.erb這個partial中，會有一個額外的索引變數person_counter紀錄編號。

使用collection的好處不只是少打字而已，還有執行效能上的大大改善，Rails內部會針對這種形式做執行效率最佳化。

更多線上資源

Copyright © 2010-2022 Wen-Tien Chang All Rights Reserved.