Question

我有标准的电子商务模式：ProductCategory，Product，Order和OrderItem

在OrderItem模型中，有product_id列。当用户创建订单并添加新的订单商品时，我想让他先选择产品类别（在select_tag中），然后只在f.collection_select :product_id中加载此类产品。

现在我的_order_item_fields.html.haml看起来像这样：

.form-group
  = label_tag 'product_category_id', 'Category'
  = select_tag 'product_category_id', options_for_select(ProductCategory.all, 'id', 'name')

.form-group
  = f.label :product_id, 'Product'
  = f.collection_select :product_id, {# now it's empty}, :id, :name, {prompt: 'Choose category first'}

因此，我需要根据所选类别编写一些JS函数来加载数据。我不确定是否需要在def中编写orders_controller，或者我可以在orders.coffee中执行product_category_id标记中选择的功能。

你能告诉我正确的道路吗？

感谢您的帮助！

Answer 1

我编写一个控制器方法，根据产品类别返回正确的产品ID和名称，并通过js创建正确的选项。如果您有许多具有大量不同产品ID的类别，那么这是有道理的，因此应该可以很好地扩展。

控制器

# OrdersController

def product_options
  category_id = params[:category_id]

  render json: {
    products: ProductCategory.find(category_id).products.pluck(:id, :name)
  }
end

这将返回以下形式的json：

{
  products: [
    [5, 'name of product with id 5'],
    [12, 'name of product with id 12'],
    ...
  ]
}

路由

然后，您必须为此添加路由条目：

# Routes
get '/route/to/product_options/:category_id', to: 'orders#product_options'

^{我认为您的路线中有resources :orders，但为了简洁起见，我现在只需创建这样的路线 - 您可以根据路线进行修改！}

咖啡

要获得此json，您可以使用jquery：

# orders.coffee

category_id = 5
$.get("/route/to/product_options/#{category_id}")

如果没有静态category_id，只需听取类别选择器的change事件：

load_new_category = (category_id) ->
  $.get("/route/to/product_options/#{category_id}")

$ -> # wait until page is loaded completely 
  $('[name="product_category_id"]').on 'change', ->
    load_new_category $(@).val()

最后，您必须对返回的json做一些事情来构建您的选项：

set_product_options = (products_json) ->
  options_html = ''

  for product_array in products_json.products
    id = product_array[0]
    name = product_array[1]

    options_html += "<option value='#{id}'>#{name}</option>"

  $('[name="product_id"]').html options_html

load_new_category = (category_id) ->
  # attach it to `set_product_options` with `.done()`
  $.get("/route/to/product_options/#{category_id}").done set_product_options

$ ->
  $('[name="product_category_id"]').on 'change', ->
    load_new_category $(@).val()

如果出现问题，请仔细检查jquery选择器（如果rails确实生成了这个名称），但这应该可以帮助您实现并根据需要进行优化。

_{（从头开始输入，所以希望其中没有拼写错误。）}

在＆＃34; select_tag＆＃34;上加载数据选择

1 个答案:

控制器

路由

咖啡