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
-, ,

執筆者:

関連記事

no image

Rails3.2でBackbone.jsとPrivate_pubでToDoアプリをリアルタイム化(できた!)

参考 Rails3.2でリアルタイムメッセージング~Private_pub、Faye Rails3.2とBackbone.jsでToDoアプリを作ってみた~backbone-on-rails &nbs …

no image

Ubuntu Server 12.04で動画のサムネイルを作成~avconv ffmpeg

  目次1 インストール2 動画の情報3 使えるフォーマットの一覧4 サムネイル画像の作成 インストール

総合的な動画の変換 …

Rails3.2でユーザー管理機能を追加~Devise

By: Mark Strobl – CC BY 2.0 目次1 前回2 generate3 routes.rb4 index.html.erb5 new6 create7 edit8 up …

Rails5でマテリアルデザイン~material_design_lite-sass

By: AnnaKika – CC BY 2.0 目次1 マテリアルデザイン2 gem3 scss & javascript4 Turbolinksに対応5 simple_form …

jQueryプラグインでHTML5のデスクトップ通知〜HTML5-Desktop-Notifications

By: Chris Bowman – CC BY 2.0 目次1 デスクトップ通知2 src3 ブラウザの対応を確認4 許可を確認5 許可を求める6 通知を発行7 情報 デスクトップ通知 …