如何在Javascript函数中使用Ruby？

Question

我意识到这不可能以我的问题的措词来表达，但是有没有办法可以得到我一直在寻找的结果。

在Rails 3.2应用程序中，我有一个带有“城市”和“位置”字段的表单：

<%= f.select :city, City.all, :prompt => "Select..." %>
<%= f.input :location_name, :input_html => {    data:{ autocomplete_source: Location.order(:name).map(&:name) } } %>

location字段使用Twitter Bootstrap的typeahead功能显示条目的自动完成列表。

位置属于城市。 我想根据用户选择的城市值来筛选自动填充条目列表。

基本上，我需要动态地改变

... autocomplete_source: Location.order(:name).map(&:name) ...

至

... autocomplete_source: Location.where('city_id => ?', '@myform.city.id').order(:name).map(&:name) ...

在coffeescript中，我可以执行以下操作：

jQuery -> 
  $('#myform_city_id').change ->
    $('#myform_location_name').attr('data-autocomplete-source','#{Location.where(city_id: @myform.city_id).order(:name).map(&:name)}')

但是不会调用活动记录查询，它只是作为字符串传递。

用新查询动态更改此自动完成源属性的最佳方法是什么？

Answer 1

您无法执行此操作，因为Javascript在客户端，而Ruby在服务器端运行。 因此，Javascript无法“看到” Ruby（ERB有所不同：ERB在客户端收到它之前已转换为HTML）。 我建议您通过Ajax招标来做到这一点。

更好地解释：您可以通过控制器执行操作，该操作为您提供所需内容的JSON表示（它甚至可以是现有的控制器，但以JSON形式发送）。 您可以通过Ajax调用此控制器（在链接上使用:remote => true ）。 您将从该链接将ajax：complete响应事件绑定到一个函数，如下所示：

$("#link_id").bind "ajax:complete", (e, xhr, settings) ->
    #TODO function body goes here

或这个：

$("#link_id").bind "ajax:complete", functionName

在此函数内部，您可以使用jQuery.parseJSON(xhr.responseText)解析JSON，然后使用此数据执行所需的操作。 看起来很复杂，但实际上很简单。

Answer 2

将您的coffeescript从filename.js.coffee重命名为filename.js.coffee.erb。 然后，您可以执行以下操作：

jQuery -> 
  $('#myform_city_id').change ->
    $('#myform_location_name').attr('data-autocomplete-source','<%= Location.where(city_id: @myform.city_id).order(:name).map(&:name) %>')