1

我有标准的电子商务模型：ProductCategory、Product和OrderOrderItem

在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标签中选择调用的函数中执行。

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

谢谢你的帮助！

4

1 回答 1

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}")

要没有 static 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 确实生成了此名称），但这应该会给您一个良好的开端来实现和优化它以满足您的需求。

（从头打出来，所以希望没有错别字。）

于 2015-11-13T18:36:47.483 回答