(j)Ruby on Merb : create views

前回の続きです。

Viewを作成します。Railsの場合は、Scaffoldで一覧のviewを作ってくれますが、Merbは(まだ)そこまで自動生成されません。そこでまずindexページのviewから作成します。次のようになります。


<h1>Articles</h1>  
<table class="articlelist">
<tr>
<th>タイトル</th>
<th>記事</th>
<th>作成日時</th>
<th>更新日時</th>
<th colspan="3">Action</th>
</tr>
<% @articles.each do |article| %>
<tr>
<td><%= article.title %></td>
<td ><%= article.body %></td>
<td ><%= article.created_at %></td>
<td ><%= article.updated_at %></td>
<td ><%= link_to 'Show', resource(article)
%></td>
<td ><%= link_to 'Edit', resource(article,
:edit) %></td>
<td><%= delete_button article, 'Delete', :class =>
'delete' %></td>
</tr>
<% end %>
</table>
<%= link_to 'New', resource(:articles, :new) %>


一覧表示と編集/削除のリンク、そして新規記事作成へのリンクとなっています。新規記事の作成をクリックすると、まだnew.html.erbがデフォルトのままですので、作成画面が表示されません。そこで、続いて作成画面を作ります。


MerbもRailsと同様に、partialを使うことができます。そこでまずフォーム部分を作成します。_form.html.erbというファイルを/app/view/articles/の中に作り、以下のように作成します。



<%= error_messages_for @articles %> 
<p>タイトル: <%= text_field :title, :size =>"40" %></p>
<p>記事: <%= text_area :body,
:cols => "50", :rows => "5", :wrap => "SOFT" %></p>


続いて、new.html.erbに



<h1>新規記事作成</h1> 
<%= form_for(@article, :action => url(:articles) ) do %>
<%= partial :form %>
<%= submit "新規作成" %>
<% end =%>
<%= link_to '一覧に戻る', url(:articles) %>


とします。partialの扱いがRailsに比べて、シンプルになっています。参考:Merbのpartial


同様に、edit.html.erb、show.html.erbを編集します。


edit.html.erb



<h1>記事を編集</h1> 
<%= form_for(@article, :action => resource(@article)) do %>
<%= partial :form %>
<p> <%= submit "更新" %> </p>
<% end =%>
<%= link_to '一覧に戻る', url(:articles) %>


 


show.html.erb



<h1><%= @article.title %></h1> 
<p><%= @article.body %></p>
<%= link_to '編集', resource(@article, :edit) %> |
<%= link_to '一覧に戻る', resource(:articles) %> |
<%= link_to '削除', resource(@article, :delete), :class => 'delete' %>


ここで注意すべきなのが、delete。deleteアクションがデフォルトではarticle controllerにないので、このまま実行するとResource route not foundとなりエラーになります。(:class => 'delete'は後ほど説明します。)

そこで、destoryアクションを呼ぶdeleteアクションをarticle controller内に作成します。



 def delete(id)
@article = Article.get(id)
raise NotFound unless @article
if @article.destroy
redirect resource(:articles)
else
raise InternalServerError
end
end


これで削除することができるようになりましたが、このままでは削除する際に何の確認もなく、いきなり削除されてしまうため、Javascriptで確認ダイアログを表示させます。

MerbはデフォルトでjQueryがバンドルされていますので、それを利用します。jQueryを利用し、カスタマイズしたjavascriptを使いたい場合は、/public/javascripts/application.jsを編集します。そこでapplication.jsを以下のように、編集します。



$(document).ready(function() { 
$('.delete').click(function() {
var answer = confirm('削除してもよろしいですか?');
return answer;
}); });


これは、deleteというclassがクリックされた場合、”削除してもよろしいですか?”というダイアログを出すというものです。


そして、/app/view/layout/application.html.erbにjQueryとこのapplication.jsを読み込むように設定します。



<script src="/javascripts/jquery.js" type="text/javascript"></script> 
<script src="/javascripts/application.js"
type="text/javascript"></script>


これで、viewは完成です。

投稿されたコメント:

コメント
  • HTML文法 不許可
About

Tomo

Search

Archives
« 4月 2014
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
今日