ActsAsTaggableOn + jQueryTokenField + Rails 4
ActsAsTaggableOn + jQueryTokenField + Rails 4
我尝试遵循本文中使用的示例:http://bloginius.com/blog/2013/12/31/how-integrate-acts-as-taggable-on-with-jquery-token-input-with-rails-3/ 并将其应用于我的场景,但在 Rails 4.2 中。如下:
<%= simple_form_for([:admin, @case_law]) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :title %>
<%= f.input :citations %>
<%= f.input :case_number %>
<%= f.input :facts, input_html: {rows: 15} %>
<%= f.input :holding, input_html: {rows: 15} %>
<%= f.input :jurisdiction, as: :country, priority: countries %>
<%= f.input :court, collection: court_listings %>
<%= f.input :judgment_date, as: :date_picker %>
<%= f.input :tag_list_tokens, data: {load: @case_law_tags} %>
</div>
<div class="form-actions">
<%= f.button :submit %>
</div>
<% end %>
case_laws.js.coffee
jQuery ->
$('#case_law_tag_list_tokens').tokenInput '/admin/case_laws/tags.json',
theme: 'facebook'
minChars: 2
allowCustomEntry: true
preventDuplicates: true
prePopulate: $('#case_law_tag_list_tokens').data('load')
lib/extensions/tag_extend.rb
module TagExtend
extend ActiveSupport::Concern
included do
scope :by_tag_name, -> name { where("name like ?", "%#{name}%") }
def self.token_input_tags
where(nil).map{ |t| {id: t.name, name: t.name} }
end
end
end
/initializers/acts_as_taggable_on.rb
ActsAsTaggableOn::Tag.send(:include, Intejus::TagExtend)
controllers/admin/case_laws_controller.rb
class Admin::CaseLawsController < AdminController
before_action :find_tags, only: [:new, :create, :edit, :update]
....
def tags
tags = ActsAsTaggableOn::Tag.by_tag_name(params[:q]).token_input_tags
respond_to do |format|
format.json { render json: tags }
end
end
private
def find_tags
@case_law_tags = params[:id].present? ? CaseLaw.find(params[:id]).tags.token_input_tags : []
end
这是生成的html:
<\div class="form-group string optional case_law_tag_list_tokens"><\label class="string optional control-label" for="case_law_tag_list_tokens">标签列表标记<\ul class="token-input-list-facebook"><\li class="token-input-input-token-facebook"><\input type="text" autocomplete="off" autocapitalize="off" id= "token-input-case_law_tag_list_tokens" style="outline: none; width: 209.993048667908px;"><\tester style="position: absolute; top: -9999px; left: -9999px; width: auto; font-size: 11.9999990463257px; font-family: Verdana, sans-serif; font-weight: 400; letter-spacing: 0px; white-space: nowrap;"><\input class="string optional form-control" type="text"名称="case_law[tag_list_tokens]" id="case_law_tag_list_tokens" 风格="display: none;">
我的第一期:
如果我单击编辑页面 link,则不会加载令牌字段并显示常规文本字段。如果我刷新编辑页面,则会出现令牌字段。
第二期:
自动完成工作并创建了标签,但令牌字段没有被预填充。
我意识到我应该使用文本字段:
<%= f.text_field :tag_list_tokens, data: {load: @case_law_tags} %>
而不是 simple_form 助手
<%= f.input :tag_list_tokens, data: {load @case_law_tags} %>
重新加载的问题与 turbolinks 有关。 Rails 在跟随 link 时不会完全重新加载文档。它通过 ajax 加载页面之间的差异。我通过修改我的代码解决了这个问题:
case_laws.js.coffee
tokenizeCaseLawTags = ->
$('#case_law_tag_list_tokens').tokenInput '/admin/case_laws/tags.json',
theme: 'facebook'
minChars: 2
allowCustomEntry: true
preventDuplicates: true
prePopulate: $('#case_law_tag_list_tokens').data('load')
$(document).on "ready page:load", ->
tokenizeCaseLawTags()
我尝试遵循本文中使用的示例:http://bloginius.com/blog/2013/12/31/how-integrate-acts-as-taggable-on-with-jquery-token-input-with-rails-3/ 并将其应用于我的场景,但在 Rails 4.2 中。如下:
<%= simple_form_for([:admin, @case_law]) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :title %>
<%= f.input :citations %>
<%= f.input :case_number %>
<%= f.input :facts, input_html: {rows: 15} %>
<%= f.input :holding, input_html: {rows: 15} %>
<%= f.input :jurisdiction, as: :country, priority: countries %>
<%= f.input :court, collection: court_listings %>
<%= f.input :judgment_date, as: :date_picker %>
<%= f.input :tag_list_tokens, data: {load: @case_law_tags} %>
</div>
<div class="form-actions">
<%= f.button :submit %>
</div>
<% end %>
case_laws.js.coffee
jQuery ->
$('#case_law_tag_list_tokens').tokenInput '/admin/case_laws/tags.json',
theme: 'facebook'
minChars: 2
allowCustomEntry: true
preventDuplicates: true
prePopulate: $('#case_law_tag_list_tokens').data('load')
lib/extensions/tag_extend.rb
module TagExtend
extend ActiveSupport::Concern
included do
scope :by_tag_name, -> name { where("name like ?", "%#{name}%") }
def self.token_input_tags
where(nil).map{ |t| {id: t.name, name: t.name} }
end
end
end
/initializers/acts_as_taggable_on.rb
ActsAsTaggableOn::Tag.send(:include, Intejus::TagExtend)
controllers/admin/case_laws_controller.rb
class Admin::CaseLawsController < AdminController
before_action :find_tags, only: [:new, :create, :edit, :update]
....
def tags
tags = ActsAsTaggableOn::Tag.by_tag_name(params[:q]).token_input_tags
respond_to do |format|
format.json { render json: tags }
end
end
private
def find_tags
@case_law_tags = params[:id].present? ? CaseLaw.find(params[:id]).tags.token_input_tags : []
end
这是生成的html: <\div class="form-group string optional case_law_tag_list_tokens"><\label class="string optional control-label" for="case_law_tag_list_tokens">标签列表标记<\ul class="token-input-list-facebook"><\li class="token-input-input-token-facebook"><\input type="text" autocomplete="off" autocapitalize="off" id= "token-input-case_law_tag_list_tokens" style="outline: none; width: 209.993048667908px;"><\tester style="position: absolute; top: -9999px; left: -9999px; width: auto; font-size: 11.9999990463257px; font-family: Verdana, sans-serif; font-weight: 400; letter-spacing: 0px; white-space: nowrap;"><\input class="string optional form-control" type="text"名称="case_law[tag_list_tokens]" id="case_law_tag_list_tokens" 风格="display: none;">
我的第一期: 如果我单击编辑页面 link,则不会加载令牌字段并显示常规文本字段。如果我刷新编辑页面,则会出现令牌字段。
第二期: 自动完成工作并创建了标签,但令牌字段没有被预填充。
我意识到我应该使用文本字段:
<%= f.text_field :tag_list_tokens, data: {load: @case_law_tags} %>
而不是 simple_form 助手
<%= f.input :tag_list_tokens, data: {load @case_law_tags} %>
重新加载的问题与 turbolinks 有关。 Rails 在跟随 link 时不会完全重新加载文档。它通过 ajax 加载页面之间的差异。我通过修改我的代码解决了这个问题:
case_laws.js.coffee
tokenizeCaseLawTags = ->
$('#case_law_tag_list_tokens').tokenInput '/admin/case_laws/tags.json',
theme: 'facebook'
minChars: 2
allowCustomEntry: true
preventDuplicates: true
prePopulate: $('#case_law_tag_list_tokens').data('load')
$(document).on "ready page:load", ->
tokenizeCaseLawTags()