![jQuery と CoffeeScript を試す
● CoffeeScript でイベントハンドラ記述 - table.js.coffee に追記
$(document).ready( ->
$(“#itemtbl”).tableDnD( {
onDrop: (table, row) ->
rows = table.tBodies[0].rows
index = -1
for i in [0..rows.length-1]
if rows[i].id == row.id
index = i
$.post “items/#{row.id}/update_order.json”, { index: index }
})
)](https://image.slidesharecdn.com/rubytokai-20110708-110708115526-phpapp01/85/Rails3-1rc4-14-320.jpg)
![update_order アクションの実装
● コントローラ修正 app/controllers/items_controller.rb
def update_order
@item = Item.find(params[:id])
@item.insert_at params[:index]
if @item.save
format.json { head :ok }
else
format.json { render :json => @item.errors, :status => :unprocessable_entity }
end
end
● routing 設定 config/routes.rb
resources :items do
member do
post 'update_order'
end
end](https://image.slidesharecdn.com/rubytokai-20110708-110708115526-phpapp01/85/Rails3-1rc4-15-320.jpg)
搁补颈濒蝉3.1谤肠4を试してみた
- 1. Rails3.1rc4 を試してみた @3rddoor
- 2. インストール オプションを付加 # gem install rails --pre これは Rails2 以前の方法 (公式ブログに載っているけど)
- 3. Rails2 以前の方法でのインストール # gem install rails --pre /usr/local/lib にインストールされる = root 権限が必要（あたりまえ）
- 4. bundler を使ったインストール Rails3.0 以降の方法 Gemfile を作成 ● source :rubygems gem 'rails', '>=3.1.0rc4' bundler でインストール ● 先にアプリケーションディレクトリを作成 $ mkdir testapp; cd testapp $ bundle install vendor/bundle 一般ユーザ権限 アプリケーションディレクトリ内にインストール
- 5. アプリ生成 $ bundle exec rails new . カレントディレクトリにアプリケーションを作成
- 6. デフォルトの Gemfile source 'http://rubygems.org' gem 'rails', '3.1.0.rc4' # Bundle edge Rails instead: # gem 'rails', :git => 'git://github.com/rails/rails.git' gem 'sqlite3' # Asset template engines SASS gem 'json' gem 'sass-rails', "~> 3.1.0.rc" gem 'coffee-script' gem 'uglifier' CoffeeScript gem 'jquery-rails' # Use unicorn as the web server # gem 'unicorn' jQuery # Deploy with Capistrano # gem 'capistrano'
- 7. scaffold $ bundle exec rails generate scaffold item title:string comment:text $ bundle exec rake db:migrate いつもどおり。
- 8. web-app-theme ● 公式 gem の最新版は Rails 3.1 に未対応 ● Gemfile に以下を追記して bundle install gem 'web-app-theme', :git => 'http://github.com/dknight/web-app- theme.git' ● テンプレート生成 $ bundle exec rails generate web_app_theme:theme ● app/view/items/index.html.erb 追記 <table class=”table”> 残念ながら普通のCSS
- 9. SASS を試す ● SASS: http://sass-lang.com/ ● Syntactically Awesome Stylesheets ● CSS の文法を改良して書きやすくしたもの ● 入れ子構文?変数などが使える (例) app/assets/stylesheets/table.css.scss 作成 $grey: #aaaaaa; .table tr td { border-color: $grey; a{ background-color: $grey; } } table の枠線とtable 内のリンクの背景色を指定
- 10. jQuery を試す ● Table Drag and Drop JQuery plugin http://www.isocra.com/2008/02/table-drag-and- drop-jquery-plugin/ ● インストール ● app/assets/javascripts/ にコピー
- 11. CoffeeScriptを試す ● app/assets/javascripts/table.js.coffee 作成 $(document).ready( ->$(“itemtbl”).tableDnD()) ● app/views/items/index.html.erb 修正 ● table に id=”itemtbl” 追加 ● 見出しの tr に class=”nodrag nodrop” 追加 表の行を移動できるように（キャプチャ略）
- 12. Reversible migration ● 順序を保存するために migration 生成 いつもどおり。 $ bundle exec rails generate migration AddPositionToItem position:integer ● db/migrate/201107..._add_position_to_item.rb class AddDispOrderToItem < ActiveRecord:Migration def change add_column :items, :position, :integer end end 従来の self.up / self.down が change に統合 ● 実行 $ bundle exec rake db:migrate
- 13. acts_as_list ● Gemfile 追記 gem 'acts_as_list' ● インストール $ bundle install ● モデル修正 app/models/item.rb class Item < ActiveRecord::Base acts_as_list end
- 14. jQuery と CoffeeScript を試す ● CoffeeScript でイベントハンドラ記述 - table.js.coffee に追記 $(document).ready( -> $(“#itemtbl”).tableDnD( { onDrop: (table, row) -> rows = table.tBodies[0].rows index = -1 for i in [0..rows.length-1] if rows[i].id == row.id index = i $.post “items/#{row.id}/update_order.json”, { index: index } }) )
- 15. update_order アクションの実装 ● コントローラ修正 app/controllers/items_controller.rb def update_order @item = Item.find(params[:id]) @item.insert_at params[:index] if @item.save format.json { head :ok } else format.json { render :json => @item.errors, :status => :unprocessable_entity } end end ● routing 設定 config/routes.rb resources :items do member do post 'update_order' end end
- 16. まとめ ● テーブルの内容編集?順序並べ替え機能の実装 ● コード量 – bundle コマンドによるインストール: 3回 – Rails コマンドによる生成: 3回 – Ruby: 15行(変更部分) – SASS: 7行（お好みでいくらでも） – CoffeeScript: 13行 ● Rails3.1 ● 非対応プラグインなどもある大幅な更新ですが、いろい ろ書きやすくなっているところも多く楽しみ