Ruby on rails初體驗(二)

      體驗一中添加了一個最基本的支架和一個簡單的數據遷移，實現了一個基本的增刪改查的功能列表。體驗二中要在次功能上繼續豐滿一下功能。實現以下效果：

    

      在每一個公司中都包含有不一樣的部門，按照體驗一中的方法，添加一個部門的支架，一個數據遷移。實現部門的增刪改查功能。部門的數據結果以下：

     

     具體方式省略。

 

      簡單建立了支架而沒有定製應用，它將難以使用，爲了給一個公司添加部門，將會邊的很麻煩。咱們把咱們但願的頁面和支架生成的部門的頁面比較一下：

       

   Cid和Chargeuserid先不用作關聯，手添便可，只是爲了可以從新組織頁面。

   部門列表和建立部門的頁面看起來和咱們想要的頁面上出現的內容很是類似，目標頁面中間部分看起來像是做爲列表，而末尾像建立部門頁面。

   

   接下來是今天要整理的內容：把一個頁面的內容分解到幾個文件裏。

   首先要理解三個概念：

         (1) 佈局：爲一系列網頁設定統一的外觀，大多數會提供出如今每一個頁面頂部和底部的標準的HTML元素。

         (2) 模板：模版是頁面的主要內容，模版與動做相關聯。

         (3) 局部模板：一個模版會調用多個不一樣的局部模版來創建頁面的主要內容，局部模版容許把一個複雜模版分解爲多個更小的部分，容許把公共的內容分離出來，好比菜單和導航欄，局部模版能夠被模版使用，它也能夠被佈局直接使用。 

       

          佈局、模版、局部模板這三種嵌入式Ruby（ERB）文件組成一個網頁。

 

    建立添加部門表單的局部模板：

         局部模板只是另一種ERB文件，它包含着與模板相同的標籤類型。此時的項目的views結構以下圖：

 

          經過拷貝app/views/departments/new.html而且另存爲app/views/companies/_new_department.html.erb來建立局部模板。一個重要的事情就是局部模板以字符_開始，Rails經過字符_來區分頁面模板和局部模板。

       在模版中包含局部模版：

        咱們要在company的show.html.erb頁面模版來把建立的局部模版包含在它的輸出裏，局部模板和模板同樣，僅僅只是一段假裝成HTML樣子的Ruby代碼，經過一個render命令到company的頁面中：

    

   

                      如今局部模板應該已經添加到company的頁面中了，讓咱們看一下show.html.erb Company頁面查看信息是否現實正確。現實內容以下：

                 

         感受好奇怪，咱們看一下app/views/departments/new.html、app/views/companies/_new_department.html.erb文件中的內容：

1 <h1>New department</h1>
2 
3 <%= render 'form' %>
4 
5 <%= link_to 'Back', departments_path %>

看來問題出如今<%= render 'form' %>這個地方，這裏是頁面直接跳轉到_form.html.erb頁面。因此就會出現如上頁面現實的問題。

下面將app/views/companies/_new_department.html.erb改成以下內容（從app/views/departments/_form.html.erb將裏面的內容複製出來的信息，由於添加部門的頁面一樣是直接跳轉到此頁面）避免衝突問題：

 1 <%= form_for(@department) do |f| %>
 2   <% if @department.errors.any? %>
 3     <div id="error_explanation">
 4       <h2><%= pluralize(@department.errors.count, "error") %> prohibited this department from being saved:</h2>
 5 
 6       <ul>
 7       <% @department.errors.full_messages.each do |msg| %>
 8         <li><%= msg %></li>
 9       <% end %>
10       </ul>
11     </div>
12   <% end %>
13 
14   <div class="field">
15     <%= f.label :name %><br>
16     <%= f.text_field :name %>
17   </div>
18   <div class="field">
19     <%= f.label :cid %><br>
20     <%= f.text_field :cid %>
21   </div>
22   <div class="field">
23     <%= f.label :chargeuserid %><br>
24     <%= f.text_field :chargeuserid %>
25   </div>
26   <div class="field">
27     <%= f.label :desc %><br>
28     <%= f.text_area :desc %>
29   </div>
30   <div class="actions">
31     <%= f.submit %>
32   </div>
33 <% end %>

下面再看瀏覽器請求的結果：

  

什麼意思，又出錯了，看來講是@department爲空，但是在添加部門的頁面這個是正常工做的啊，爲何呢？對比一下模板中的內容是同樣的，問題在於@department變量，額，問題就是這個，原來的時候建立一個部門是由DepartmentsController控制的，此刻改成CompaniesController控制，在DepartmentController中調用create方法的時候調用以下代碼：

 1   # POST /departments
 2   # POST /departments.json
 3   def create
 4     @department = Department.new(department_params)
 5 
 6     respond_to do |format|
 7       if @department.save
 8         format.html { redirect_to @department, notice: 'Department was successfully created.' }
 9         format.json { render action: 'show', status: :created, location: @department }
10       else
11         format.html { render action: 'new' }
12         format.json { render json: @department.errors, status: :unprocessable_entity }
13       end
14     end
15   end

    @department = Department.new(department_params)原來在調用create的時候它自己給定義好了一個空的department的實例變量，知道問題，那麼就來解決這個問題

咱們須要將頁面中的@department改成一個局部變量。

 1 <h1>New department</h1>
 2 
 3 <%= form_for(department) do |f| %>
 4     <% if department.errors.any? %>
 5         <div id="error_explanation">
 6           <h2><%= pluralize(department.errors.count, "error") %> prohibited this department from being saved:</h2>
 7 
 8           <ul>
 9             <% department.errors.full_messages.each do |msg| %>
10                 <li><%= msg %></li>
11             <% end %>
12           </ul>
13         </div>
14     <% end %>
15 
16     <div class="field">
17       <%= f.label :name %><br>
18       <%= f.text_field :name %>
19     </div>
20     <div class="field">
21       <%= f.label :cid %><br>
22       <%= f.text_field :cid %>
23     </div>
24     <div class="field">
25       <%= f.label :chargeuserid %><br>
26       <%= f.text_field :chargeuserid %>
27     </div>
28     <div class="field">
29       <%= f.label :desc %><br>
30       <%= f.text_area :desc %>
31     </div>
32     <div class="actions">
33       <%= f.submit %>
34     </div>
35 <% end %>
36 
37 
38 <%= link_to 'Back', departments_path %>

     如何把局部變量傳遞給局部模板：

        因爲局部模板就像是函數，考慮到DepartmentController中給@departmentde能夠所使用的值，因爲表單會被用來初始化department，因此咱們只要用一下方法給表單傳遞一個新的Department對象：

      <%= render :partial => "new_department", :locals=>{ :department => Department.new } %>

     下面在看一下頁面的結果：

     

工做正常，可是下面有兩個Back，額，額，因爲局部模板中的Back沒有去掉，可是此時已經不須要從建立department到department列表了，此處就刪掉吧。簡單的很。