如何使用Selectize.js查找或创建rails belongs_to关联？

Question

我很难弄清楚如何将Selectize.js与rails中的belongs_to关联结合起来.我想做这样的照片:

我试图使用accepts_nested_attributes,但这似乎不适用于belongs_to关系.

我尝试像这个railscast一样做一个自动完成的关联.

我真正想做的是使用Selectize样式集合select来创建"Speaker"关联(如果它已经在数据库中),但如果它尚不存在则添加一个新关联.Selectize使我能够添加一个新的,但我在通过表单传递它以在相关模型中创建新记录时遇到了麻烦.

这是我的模特:

class Quote < ApplicationRecord
  belongs_to :speaker,  class_name: "Artist"
  belongs_to :topic,    class_name: "Artist"
end

Quote.rb

class Artist < ApplicationRecord
  has_many :spoken_quotes, class_name: "Quote", foreign_key: :speaker_id
  has_many :topic_quotes,  class_name: "Quote", foreign_key: :topic_id
end

Artist.rb

我的形式:

<%= f.label :speaker, 'Who said it?' %>
<%= f.collection_select :speaker_id, Artist.order(:name), :id, :name, {prompt: 'Select an artist'}, {class: 'form-control select-artist'} %>

_form.html.erb

控制器:

quotes_controller.rb

artists_controller.rb

如何通过Quote.new表单通过Selective-style集合选择创建一个新的艺术家(作为"演讲者")？Selectize行为是我正在寻找的用户体验,我只是无法弄清楚如何通过Quote表单创建新的艺术家.

Answer 1

如果您必须使用 selectize 用户体验，您可能需要使用 javascript 通过 ajax 创建艺术家/演讲者。随着selectize-rails 创业板，jquery-rails还有一点点的JavaScript代码，您可以：

1. 通过ajax创建艺术家/演讲者并将值和id分配给引号表单输入 -请参阅演示或

2. 弹出一个带有艺术家表单的模式，通过ajax提交表单并将值和id分配给引号表单输入

我试图用您想要实现的基本结构来搭建这个简单的 rails 应用程序，以向您展示选项 1 的示例。我在自述文件中包含了设置说明和演示。

需要的主要变化是：

宝石改动：

将selectize-rails和jquery-railsgems添加到您的Gemfile并运行 bundle install。

HTML 表单更改：

将 selectize 类添加到 collection_select 输入标签

# /views/quotes/_form.html.erb

<%= f.collection_select :artist_id, Artist.order(:name), :id, :name, {prompt: 'Select an artist'}, {class: 'selectize'} %>

Javascript 更改：

创建/assets/javascript/quotes.js并进行以下更改。

# /assets/javascript/quotes.js

$(document).on("turbolinks:load", function(){
  $(".selectize").selectize({
    create: function(input, callback) {
      $.post('/artists.json', { artist: { name: input } })
        .done(function(response){
          console.log(response)
          callback({value: response.id, text: response.name });
        })
    }
    });
})

修改你的 artists_controller

修改artists_controller#createaction 方法，使其能够呈现 json 响应。

  # POST /artists
  # POST /artists.json
  def create
    @artist = Artist.new(artist_params)

    respond_to do |format|
      if @artist.save
        format.html { redirect_to @artist, notice: 'Artist was successfully created.' }
        format.json { render :show, status: :created, location: @artist }
      else
        format.html { render :new }
        format.json { render json: @artist.errors, status: :unprocessable_entity }
      end
    end
  end

您还可以观看此 GoRails 视频以了解如何实现选项 2。