想在Rails应用里实现一个酷炫功能吗？当用户通过Slim Select下拉菜单选择一个加密货币时，页面能立刻、动态地显示出它的实时价格。这背后，是前端CoffeeScript与后端Rails控制器的一次默契配合。下面，我们就来拆解这个功能的完整实现路径，从监听选择事件到数据库查询，一步步用代码说话。

欧意 www.okx.com 若打不开请 点击跳转 下载请点击 [→] 官方app下载 [←]

币安 www.binance.com 若打不开请 点击跳转 下载请点击 [→] 官方app下载 [←]

前端实现：CoffeeScript 和 AJAX

一切从前端开始。核心思路很简单：盯住那个Slim Select下拉框，一旦用户的选择发生变化，就立刻发个请求到后台去问价格。用CoffeeScript来写，代码既简洁又清晰：

coinWithPrices = ->
  coin = $('#investment_coin_name').val()
  $.ajax
    url : '/commons/get_prices',
    data : { coin_name: coin }
  .then (data) ->
    $('#investment_shopping_price').val(data.coin_price) # 修改这里

$(document).on "turbolinks:load", ->
  $('#investment_coin_name').on('change', coinWithPrices) # 修改这里

来，我们逐行看看这段代码在做什么：

coinWithPrices = ->：这里定义了一个函数，它就是整个动态查询的发动机。

coin = $('#investment_coin_name').val()：首先，获取用户在Slim Select组件中选中的那个币种名称。

$.ajax：接下来，发起一个AJAX请求。请求的目标地址是/commons/get_pricescoin作为参数coin_name一起送过去。

.then (data) ->：当后端成功响应后，会进入这个处理环节。返回的数据data里就装着我们要的价格。

$('#investment_shopping_price').val(data.coin_price)：这是关键一步！把返回的价格data.coin_price，填充到ID为investment_shopping_price的输入框里。请注意，这里的目标是更新“shopping_price”文本框，而不是读取某个元素的data属性，所以代码注释也特别提醒了这一点。

$(document).on "turbolinks:load", ->：为了确保页面在Turbolinks（一种加速页面导航的Rails技术）加载后代码也能正常运行，我们把事件绑定放在这个事件监听器里。

$('#investment_coin_name').on('change', coinWithPrices)：最后，为Slim Select元素绑定change事件。一旦选项改变，立刻触发coinWithPrices函数去获取新价格。这里同样需要注意，是监听change事件，而不是直接初始化函数。

有几个细节需要你留意：

第一，确保项目里已经引入了jQuery库，因为我们的AJAX调用和事件监听都依赖它。

第二，代码中的选择器（如#investment_coin_name和#investment_shopping_price）需要根据你实际HTML元素的ID进行替换。

第三，turbolinks:load事件能保证每次页面加载或通过Turbolinks切换页面后，事件绑定都能正确执行。

后端实现：Rails Controller

前端发出了请求，后端就得接住并处理。我们需要在Rails控制器里创建一个动作（Action），专门负责接收币种名称、查询数据库并返回价格。

def get_prices
  @coin_name = params[:coin_name]
  coin = Coin.find_by("name ILIKE ", @coin_name) # 使用 Coin 模型查找

  if coin
    data = { coin_price: coin.price } # 假设 Coin 模型有 price 属性
  else
    data = { coin_price: nil } # 如果找不到，返回 nil
  end

  render json: data # 返回 JSON 数据
end

这段控制器代码的逻辑非常清晰：

def get_prices：定义了一个名为get_prices

@coin_name = params[:coin_name]：首先，从请求参数中提取前端传过来的coin_name。

coin = Coin.find_by("name ILIKE ", @coin_name)：接着，使用Coin模型进行查询。这里用了ILIKE进行模糊匹配，并且忽略大小写，这样即使用户输入“Bitcoin”或“bitcoin”，都能找到记录。

if coin ... else ... end：然后是一个条件判断。如果成功找到了对应的coin记录，就构造一个哈希，把该币种的price属性值放进去。这里假设你的Coin模型确实有一个price字段来存储价格。如果没找到，则返回一个coin_price为nil的哈希。

render json: data：最后，将构造好的data哈希以JSON格式渲染并返回给前端。前端CoffeeScript代码中的data.coin_price就是从这里来的。

实现后端时，别忘了这几件事：

首先，确保你的数据库中已经存在Coin模型（或你命名的其他模型），并且该模型拥有name和price这两个属性。

其次，模型和属性的名称可以根据你的实际项目结构灵活调整。

最后，也是至关重要的一步：打开config/routes.rb文件，添加一条路由规则，将前端的请求地址映射到这个控制器动作上。例如：get '/commons/get_prices', to: 'your_controller#get_prices'。请务必将your_controller替换成你实际放置get_prices方法的控制器名称。

总结

至此，一个完整的动态价格查询功能就搭建完成了。整个过程清晰地展示了如何将Slim Select的前端交互、CoffeeScript的AJAX异步请求与Rails后端的数据库查询无缝衔接起来。其技术核心在于前后端通过AJAX进行数据交换：前端负责触发和展示，后端负责查询和提供。当然，在应用到你的实际项目时，请根据具体情况调整代码中的选择器、模型名和路由。只要确保所有依赖（如jQuery、Slim Select库）都已就位，这套方案就能流畅运行起来。