jQuery Railsで使えるGem

Rails3.2でFacebook風インターフェイスでタグづけ〜acts-as-taggable-on+jquery.tokenInput

投稿日:

railscasts.com/episodes/258-token-fields?language=ja&view=asciicast

stackoverflow.com/questions/6674127/how-to-use-jquery-tokeninput-and-acts-as-taggable-on

acts-as-taggable-on

github.com/mbleigh/acts-as-taggable-on

Gemfile

bundle

generate

 

 

 設定

Model

順位つきのタグの場合

 使い方

1つのモデルについたタグリスト

登録はカンマ区切りのStringsで

RABLで出した例

 

詳細なタグリストを一括で ハッシュのリストで取れる

 

そして、今回つかう検索して絞込みしたタグリスト

うん、無理してacts-as-taggable-onをつかう必要もなかったかも

 

タグから検索する

タグは配列で渡す and かorかはオプションで指定する

  • match_all はand ->じゃなかった リストにあるタグに過不足なく一致しているかどうかだった https://github.com/mbleigh/acts-as-taggable-on/issues/87
  • any はor
  • excludeはnot

ただ、使えないのが、タグ配列に空を渡した場合、Allじゃなくて[]空が返ってくる仕様

こんな感じでModelでメソッドを作って空の場合はscopedを渡すようにした

 

*selfを返すと、Recipe.where().any_tagged_with().order()みたいな場合、Recipe.any_tagged_withって意味になって、whereが効かなくなる.ここはscopedを返す.

ソースを見てたらここぽいのでメモ

empty_result = scopedでconditions => falseにしてる

これをどうにかすれば全結果が返ってくるはず(未検証)

 

Acts_as_taggable_onのスキーマ

 

 

jQuery.tokenInput

loopj.com/jquery-tokeninput/

html

テキストフィールドで

 jQuery

引数は、params[:q]に対して、[{id: XXX, name: XXX}, …の形でJSONを返してくれるアドレス

controller

それをこれからつくる(といってもほぼ参照先のまま)

うえに書いたとおりjQuery.tokenInputで必要なJSONはid: とname:

これを取得すると選択肢にnameが現れて、隠されているもともとのテキストフィールドにidがカンマ区切りで自動的に挿入される仕組み

screenshot

この動きは次のようなコールバックを監視するとわかる

POST

そのまま、テキストフィールドに渡されたカンマ区切りのこのリストをtags_list(ここではarchitecture_list)としてPOSTすればtags_listが登録できる

backboneを使っているのでこんな感じで

prePopulate

更新は同じくPUTすればいいけど、もともとあるタグリストを表示させる必要がある

prePopulateをつかう

idとnameの仕組みは前と同じ

 tokenInputで新しいタグを登録できるようにする

これはRailsCastsのハック

検索結果が0の場合は検索語をそのままJSONとして返すようにしてやれば、nameの欄が選択肢に表示されて、それを選べば、idがテキストフィールドにそのまま並ぶという仕組み

-jQuery, Railsで使えるGem
-, ,

執筆者:

関連記事

Rails3.2からMongoDBを使ってアプリをつくってみる~mongoid

MongoDBはとても素直で扱いやすいということがわかってきたので、以前作成した郵便番号・住所の相互検索アプリをまたつくってみた 参照 MongoDBのチュートリアルをこなす KEN_ALL.CSVを …

Rails4でのJSONテンプレート~jbuilder+rabl+ruby

By: Wonderlane – CC BY 2.0[/caption] Rails4からJSONも標準でjbuilderを使ってテンプレートから出力できるようになった けど、しっくり来な …

Rails3.2でGoogle Calendarライクなカレンダーを使う〜fullcalendar-rails

目次1  fullcalendar-rails2 Hello fullcalendar3 オプション  fullcalendar-rails 2種類あるけど上の方を使った github.com/bok

Railsでajaxなテーブルを使う~datatables

    github.com/rweng/jquery-datatables-rails 目次1 Gemfile2 application.js3 application.css4 …

多対多の関係でまだ関連を持っていない候補を探す〜active_record、pluck、not in

By: Kevin Dooley – CC BY 2.0 目次1 前提2 やりたいこと3 解4 解説 前提 PersonとProjectは、ProjectsPersonという中間モデル(テ …