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とBackbone.jsでリアルタイムな2ch風な掲示板をつくったら〜private_pub

By: Kevin Dooley – CC BY 2.0   まだ、Observerのことがよくわかってない ので、過去のやつをもとにやってみた dry-shore-2517.h …

no image

Rubyからdocxを生成する

    前提 Rubyでdocxをいろいろ分析してみた 変数の仕様~正規表現 いろいろなパターンで試してみた 例えば、こんな文 [crayon-5b5096518a71b87283 …

Railsのテーブル並び替えを実装する

    環境 RailsにTwitter Bootstrapを設定する~twitter-bootstrap-rails 参考 #147 Sortable Lists (revise …

Rails3でajaxでD&Dでまとめてファイルアップロード2~jQueryFileUpload for Rails

  前提 Rails3でajaxでD&Dでまとめてファイルアップロード~jQueryFileUpload for Rails Ruby on Rails 3.2でファイルアップロード …

Rails3.2とBackbone.jsでGoogle CalendarライクなカレンダーにCRUD~fullcalendar-rails

目次1 前回2 READ ~データベースからイベントを読み込んでカレンダーに表示する3 CREATE~カレンダーからイベントを登録する4 UPDATE1~カレンダーのイベントをクリックしてイベントを編 …